Loading course content...
HTML Tags Explained: A Guide to Different Types of Tags in HTML
Code Playground is only enabled on larger screen sizes.
In this lesson, we are going to explore some of the most commonly used HTML tags, their purposes, and how to use them effectively in your web applications.
The HTML document is made of HTML elements in a nested structure.
Most elements have both an opening tag and a closing tag:
An element could hold textual content between the opening and closing tags.
html
<p>Hello, world!</p>Or wrap around other elements, forming a nested structure.
html
<div>
<p><!-- . . . --></p>
<section>
<p><!-- . . . --></p>
</section>
</div>Inside the opening tag, you can define attributes, which are used to specify additional information about the element, such as its class, id, and so on.
The attribute is usually in a key/value pair, and the value must always be enclosed inside matching quotes.
However, there are some exceptions to these general formats.
For example, the <br /> element, which creates a line break, does not need an opening tag.
Some attributes, such as multiple, do not require a value.
You should remember that if an element does require a pair of tags, then it should never be overlooked.
In most cases, the webpage could still render correctly, but as the structure of your HTML document grows more complex, unexpected errors may occur.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="/styles.css"> </head> <body> <header> <h1>HTML Elements Demo Page</h1> <p> This page demonstrates core text, formatting, and layout elements in HTML. </p> </header> <nav> <a href="#">Home</a> <a href="#">Docs</a> <a href="#">About</a> </nav> <main> <section> <h2>Text Content Elements</h2> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> <p> This is a paragraph. It contains <a href="#">a link</a> and explains basic text structure. </p> <ul> <li>Unordered list item 1</li> <li>Unordered list item 2</li> </ul> <ol> <li>Ordered list item 1</li> <li>Ordered list item 2</li> </ol> <dl> <dt>HTML</dt> <dd>HyperText Markup Language</dd> <dt>CSS</dt> <dd>Cascading Style Sheets</dd> </dl> <blockquote cite="https://example.com"> “This is a blockquote element used to quote external sources.” </blockquote> <p> <abbr title="HyperText Markup Language">HTML</abbr> is used to structure content. </p> <p><cite>– The Web Book</cite></p> </section> <section> <h2>Text Formatting Elements</h2> <p><strong>Strong</strong> text is used for emphasis.</p> <p><em>Emphasized</em> text is italicized.</p> <p><b>Bold</b> and <i>Italic</i> without semantic meaning.</p> <p>This is <mark>highlighted</mark> text.</p> <p>Use <code><code></code> for inline code.</p> <pre><code>const hello = "world";</code></pre> <p> Text can be <small>small</small> or <del>deleted</del> or <ins>inserted</ins>. </p> <p>H<sub>2</sub>O (subscript), and E = mc<sup>2</sup> (superscript)</p> <p><kbd>Ctrl + C</kbd> for copy</p> </section> <section> <h2>Layout Elements</h2> <article> <h3>Article Title</h3> <p> This is an <code><article></code> element, useful for self-contained content. </p> </article> <aside> <h4>Aside Section</h4> <p> This is an <code><aside></code>, often used for side content or tips. </p> </aside> <section> <h4>Nested Section</h4> <p> This is a nested <code><section></code> inside another section. </p> </section> <div> <p> This content is wrapped in a <code><div></code>, a generic block container. </p> </div> <details> <summary>Lorem ipsum dolor sit amet consectetur adipisicing elit</summary> Lorem ipsum dolor sit amet consectetur. . . </details> </section> </main> <footer> <p>© 2025 XXXX Corp. Built with ❤️ using HTML.</p> </footer> </body> </html>