HTML Elements
Learn what HTML elements are: paired vs empty (void) elements, block-level vs inline elements, and how to nest them, with runnable examples.
Elements are the fundamentals of HyperText Markup Language (HTML). Each HTML document is made of elements that are specified using tags.
HTML elements and HTML tags are often confused. The tags are used to open and close the object, whereas the element includes both tags and its content. Let’s consider an example with the <h1> tag: <h1> Title of the document </h1> - is an element, and <h1>, </h1> - are tags.
An element's attributes are also written inside its opening tag — see HTML Attributes for how they add extra information.
Types of HTML Elements
HTML elements come in two forms: paired elements and empty (void) elements.
A paired element has an opening tag (<tag>) and a matching closing tag (</tag>), and the element's content sits between them. For example, <p>Hello</p> consists of the <p> opening tag, the text Hello, and the </p> closing tag.
Do not forget the closing tag! Though some HTML elements are displayed correctly even without the closing tag, do not rely on this. It might lead to unexpected results or errors.
Example of paired HTML elements:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Title of the document</h1>
<p>The first paragraph</p>
<p>The second paragraph, <br /> where line break is inserted </p>
</body>
</html>In the example above we used 4 paired elements:
- the
<html>element, which includes all other HTML elements of the webpage, - the
<body>element, which contains the body of the webpage, - the
<p>element, that defines a paragraph, - the
<h1>element, which contains the heading of the webpage.
We also used the empty <br> tag to insert a line break.
Empty HTML Elements
Empty elements (also called void elements) have no content and therefore no closing tag. The <br> element, which inserts a line break, is a good example. In XHTML the empty elements are "self-closed" in the opening tag like this: <br/>.
The empty elements in HTML are: <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <param>, <source>, <track> and <wbr>.
The old <keygen> element was also an empty element, but it has been removed from the HTML standard and should no longer be used.
Being "empty" only refers to having no content — it says nothing about layout. Some empty elements are block-level (for example, <hr> draws a full-width horizontal rule), while others are inline (for example, <br> and <img>).
Example of the HTML <br> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>HTML <br> tag</h1>
<p>This tag <br /> defines a line break.</p>
</body>
</html>Block-level and Inline HTML Elements
For the purpose of styling and layout, most HTML elements fall into one of two categories based on their default display value: block-level elements and inline elements. This default behavior matters because it controls three things before you write any CSS:
- Flow: block-level elements start on a new line and stack vertically; inline elements sit side by side within a line of text.
- Width and the box model: a block-level element takes up the full available width and respects
width,height, and verticalmargin/padding. An inline element only takes up the width of its content and ignoreswidth/heightand vertical margins. - Nesting: a block-level element may contain other block-level and inline elements, but an inline element should generally only contain other inline elements (and text), not block-level ones.
You can change an element's default category with the CSS display property, but knowing the default helps you predict how a page will lay out. For a deeper look, see HTML Block and Inline Elements.
Block-level elements structure the main part of your web page by dividing your content into coherent blocks. They always start on a new line and take up the full width available, and have a line break before and after the element.
Block-level elements are <address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> and <video>.
All block-level elements have opening and closing tags.
Example of the HTML block-level elements:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<footer>
<p>Author: W3docs team</p>
<p><a href="[email protected]">Send message to the author</a>.</p>
</footer>
</body>
</html>In the example we used the <footer> block-level element to define the footer of the web page and its content.
Inline elements are used to distinguish part of a text, to give it a particular function or meaning. Inline elements usually include a single word or a few words. They do not cause a line break and do not take up the full width of a page, only the space bounded by its content. Inline elements are usually used within other HTML elements.
Inline elements are: <a>, <abbr>, <b>, <bdo>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time> and <var>.
The elements <acronym>, <big>, and <tt> were once inline elements too, but they are now obsolete. Use <abbr> instead of <acronym>, and use CSS instead of <big> and <tt>.
Nested HTML elements
HTML elements can contain other elements, i.e. be nested. For example, if you want to give a text a strong emphasis and tell the browser to display it as bold, you can use the <strong> tag nested in the <p> tag.
Example of the HTML nested elements:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Title of the document</h1>
<p>The first paragraph</p>
<p><strong>This part of the sentence</strong> has a strong emphasis and is displayed as bold.</p>
</body>
</html>HTML tags should be "nested" in proper order, meaning that the tag opened most recently is always the next tag to close.
In our example, we closed the <strong> tag first, and then the <p> tag.