HTML elements
testYourself HTML1368
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.
<p>example paragraph</p>
Nested elements
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, <h1>
and <p>
elements are nested inside <div>
element.
Void elements
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>
Elements <div>
and <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>.