An HTML tag is composed of the name of the element, surrounded by angle brackets (
< >). An end tag also has a slash (
/) after the opening angle bracket, to distinguish it from the start tag.
Nested elements are elements that are inside other elements (elements can contain elements).
<div> <h1>page header</h1> <p>page paragraph</p> </div>
In the given example,
<p> elements are nested inside
Not all elements have an opening and closing tag. Some elements called void elements or empty elements consist only of a single tag e.g. img, input, link, hr, br. An empty element is an element that cannot have any nested elements or text nodes. In HTML, using a closing tag on an empty element is usually invalid (e.g.,
<input type="text"></input> is invalid).
Void elements are:
<img /> <meta /> <br /> <link /> <input />
Semantic vs non-semantic elements
Semantics refers to the meaning of a piece of code.
For example, the
<h1> element is semantic because the text wrapped around its tags indicates "a top-level heading on the page."
<h1>This is a heading</h1>
Other sematic elements:
<article> <p> <nav> <code>
<span> don't have any semantic meaning.
block vs inline elements
A block-level element always starts on a new line and takes up the full width available if the width property is not set.
Example block-level elements are:
<div> <p> <table> <h1>
The inline elements only occupy the space bounded by the tags defining the element, instead of taking up the full width available.
Example inline elements are:
<span> <strong> <em> <a>.