Loading course content...

What are HTML Tags | TheDevSpace

What are HTML Tags

The HTML document is made of HTML elements in a nested structure.

Most elements have both an opening tag and a closing tag, like this:

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. They 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, notice the word "usually". Yes, 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 left out.

In most cases, the browser is smart enough to render the webpage correctly, but as the HTML document's structure becomes 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>&lt;code&gt;</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>&lt;article&gt;</code> element, useful for
          self-contained content.
        </p>
      </article>

      <aside>
        <h4>Aside Section</h4>
        <p>
          This is an <code>&lt;aside&gt;</code>, often used for side content or
          tips.
        </p>
      </aside>

      <section>
        <h4>Nested Section</h4>
        <p>
          This is a nested <code>&lt;section&gt;</code> inside another section.
        </p>
      </section>

      <div>
        <p>
          This content is wrapped in a <code>&lt;div&gt;</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>&copy; 2025 XXXX Corp. Built with ❤️ using HTML.</p>
  </footer>
</body>

</html>