Elements are the fundamentals of HyperText Markup Language (HTML). Each HTML document is made of elements, which are defined 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.
Types of HTML Elements
HTML elements can come in pairs or be empty. The paired elements have an opening (<>) and (</>) closing tags, and the content of the element is placed in between them.
Do not forget the closing tag! Though some HTML elements are displayed correctly, even without the closing tag, however, do not rely on this. It might lead to unexpected results or errors.
The empty elements have no closing tags. Empty elements can be "closed" in the opening tag like this: <br/> .
Example of the HTML empty elements:
<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 above-mentioned example 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 define a paragraph
- the <h1> element, which contains the heading of the webpage
In the given example we also used an empty <br> tag to insert a line-break.
Block-level and Inline HTML Elements
For the purpose of styling, all HTML elements are divided into two categories: block-level elements and inline elements.
Block-level elements are those that 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 of a page, from left to right; they also can take up one line or multiple lines and have a line break before and after the element. Block-level elements can contain both block-level & inline elements.
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:
<html> <head> <title>Title of the document</title> </head> <body> <footer> <p>Author: W3docs team</p> <p><a href="firstname.lastname@example.org">Send message to the author</a>.</p> </footer> </body> </html>
In the example we used <footer> block-level element to define the footer of the web page and its content.
Inline elements are meant to differentiate part of a text, to give it a particular function or meaning. Inline elements usually comprise a single or 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 opening and closing tag. The inline elements are usually used within other HTML elements.
Inline elements are: <a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <buttom>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt> and <var>.
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:
<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.
The end tag
In the end you should put the end tag. However, even if you forget about it, some HTML elements will still show correctly. The closing tag is considered to be optional, so the example below will work in all the browsers. But don’t rely on this. If you want to avoid unexpected errors try not to forget about the end tag.
Example where the HTML end tag is absent:
<html> <head> <title>Title of the document</title> </head> <body> <h1>HTML end tag </h1> <p>We forgot to put the end tag. </body> </html>
Empty HTML Elements
The HTML elements that don’t have any content are called empty elements. The <br>, which defines a line break, is an empty element that doesn’t have a closing tag.
Example of the HTML <br> tag:
<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>