What is an HTML Element? How do you create one?
HTML elements are the building blocks of HTML documents. An HTML element is composed of an opening tag + content + a closing tag.
Example of an HTML element:
<p>This is a paragraph.</p><p>is the opening tag.- This is a paragraph. is the content.
</p>is the closing tag.
Here is a diagram showing all the parts of a paragraph element.
Nested HTML Elements
HTML elements are capable of being nested. Meaning that one element can be placed inside another element.
The following example contains six HTML elements:
<html>, <head>, <title>, <body>, <p>, and <br>:
<html>
<head>
<title>first page</title>
</head>
<body>
<p>This is a paragraph <br>new line</p>
</body>
</html>The <p> tags, <br> tag, and the content text are all nested inside the body element in the sample above.
Some HTML elements, such as the <br> element, have no content and do not require an end tag. These are known as empty elements. The
tag defines a line break in the paragraph.
Another example of nested elements:
<p>This is <em>Emphasize</em> text</p>
<p>This is <b>bold</b> text</p>In the above example <em> and <b> elements are nested inside <p> element.
Basic Elements
The following are the basic elements of an HTML page that you will come across:
The <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> tags are used to indicate a text header.
The <p> tag is used to indicate a paragraph.
The <hr> tag is used to indicate a horizontal ruler.
The <a> (anchor) tag is used to indicate a link.
The tags <ul> (unordered list), <ol> (ordered list), and <li> (list element) are used to indicate a list.
The <img> tag is used to indicate an image.
The <div> tag defines a division or a section in an HTML document
The <span> tag is used to indicate a text span.
HTML Cheat Sheet
If you want to learn more about HTML, grab my cheat sheet which is available on Gumroad.
This product will assist you in learning the fundamental HTML elements in your Web Development journey. It is intended for both beginners and experts who want to brush up on their knowledge.
All of the resources are structured and organised in a straightforward and easy-to-read manner. They include interactive external links, images, tag names and code snippets to help you understand the topics better.
Further reading
Want to learn more about HTML elements? Here is a useful reference guide that MDN Web Docs have created – HTML elements reference.
See also
What is an HTML Document’s Basic Structure?
If you liked this article, then please share. You can also find me on Twitter for more updates.