HTML

Overview

HTML stands for Hypertext Markup Language. It is the standard language of the web intended to be displayed using web browsers like Firefox, Chrome, and Edge.

The following is a good example of an HTML document with examples of many basic HTML elements.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Example</title>
  </head>
  <body>
    <div id="top" class="page" role="document">
      <header role="banner">
        <h1>HTML5 Example</h1>
        <p>This is an example page full of HTML.</p>
      </header>
      <nav role="nav">
        <ul>
          <li>
            <a href="#tech" class="big title" custom-attr="ok">Tech</a>
            <ul>
              <li><a href="https://google.com">Google</a></li>
              <li><a href="https://cloudflare.com">Cloudflare</a></li>
              <li><a href="https://microsoft.com">Microsoft</a></li>
            </ul>
          </li>
          <li>
            <a href="#news" data-news="true">News</a>
            <ul>
              <li><a href="https://nytimes.com">NYTimes</a></li>
              <li><a href="https://washingtonpost.com">WAPO</a></li>
            </ul>
          </li>
        </ul>
      </nav>
      <main>
        <section id="headings">
            <div>
              <h1>Heading 1</h1>
              <h2>Heading 2</h2>
              <h3>Heading 3</h3>
              <h4>Heading 4</h4>
              <h5>Heading 5</h5>
              <h6>Heading 6</h6>
            </div>
        </section>
        <section id="other">
            <p>This is a paragraph.</p>
            <p>This is another paragraph.</p>
            <ol>
                <li>Ordered list 1</li>
                <li>Ordered list 2</li>
                <li>Ordered list 3</li>
            </ol>
            <ul>
                <li>Unordered list 1</li>
                <li>Unordered list 2</li>
                <li>Unordered list 3</li>
            </ul>
        </section>

        <h3>Horizontal rule</h3>
        <hr>

        <h3>Line break</h3>
        <br>

        <section id="table">
            <table>
                <caption>Caption</caption>
                <thead>
                    <tr>
                        <th>Heading 1</th>
                        <th>Heading 2</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Footer 1</th>
                        <th>Footer 2</th>
                    </tr>
                </tfoot>
                <tbody>
                    <tr>
                        <td>Cell 1</td>
                        <td>Cell 2</td>
                    </tr>
                    <tr>
                        <td>Cell 1</td>
                        <td>Cell 2</td>
                    </tr>
                </tbody>
            </table>
        </section>
        <section>
            <div>
                <p>This is a paragraph with text that has been modified to appear
                    <strong>strong</strong>, <em>emphasized</em>, <b>bold</b>, <i>italicized</i>,
                    <u>underlined</u>, <s>struckthrough</s>, etc.
                </p>
            </div>
        </section>
      </main>
    </div>
  </body>
</html>

Elements

An HTML document is comprised of elements. An element is the combination of a start tag, content, and an end tag. For example, the following is an element.

Example 1
<title>HTML5 Example</title>

In Example 1, <title> is the start tag, "HTML5 Example" is the content, and </title> is the end tag. HTML elements can be nested. What this means is an HTML elements content can be another HTML element.

Example 2
<section>
  <div>
      <p>This is a paragraph with text that has been modified to appear
          <strong>strong</strong>, <em>emphasized</em>, <b>bold</b>, <i>italicized</i>,
          <u>underlined</u>, <s>struckthrough</s>, etc.
      </p>
  </div>
</section>

In Example 2, <section> is the start tag, </section> is the end tag, and the rest (below), is the content, and also another HTML element itself, which we can refer to as a nested element, because it is nested inside of another element, as that element’s content!

Example 3
<div>
    <p>This is a paragraph with text that has been modified to appear
        <strong>strong</strong>, <em>emphasized</em>, <b>bold</b>, <i>italicized</i>,
        <u>underlined</u>, <s>struckthrough</s>, etc.
    </p>
</div>

This can continue on and on. The following, Example 4, is yet another nested element.

<p>This is a paragraph with text that has been modified to appear
    <strong>strong</strong>, <em>emphasized</em>, <b>bold</b>, <i>italicized</i>,
    <u>underlined</u>, <s>struckthrough</s>, etc.
</p>

Tags

HTML has a variety of different tags, each with a distinct purpose. Whether or not a website uses a specific tag for it’s intended purpose is another story. Certain HTML tags are oft "misused", and/or overused in modern web development (div tags being the poster child for this).

It is worthwhile to read about the different tags, and use them as they are intended. Not using the tags as they are intended can lead to large consequences for users with special accessibility needs. You can read more about this on Mozillas Accessibility page for HTML. Please be considerate and be thoughtful when using tags.

Content

As alluded to before, the content of an HTML element is what lies between the start tag and end tag. We now know that this could be simple text, or it could be another HTML element.

Attributes

HTML tags can have attributes. Attributes are always shown in the start tag, and can come in two general "forms". The first form is in a name="value" format where each attribute has an associated value.

<div class="h1-strong"></div>

The second form is stand-alone, where the attribute is simply listed in the start tag.

<script src="my_script.js" async></script>

There are a variety of valid HTML attributes. It is important to note that if an attribute in an HTML tag is not one of the official attributes, the browser will ignore it. With that being said, the "unofficial" attributes will still be a part of the Document Object Model (DOM), and therefore accessible to javascript. For this reason, it is not uncommon to come across technically "invalid" HTML attributes in website’s source code, that do serve a purpose for the website as a whole.

In HTML5, there now exists an HTML compliant version of these custom (or "non-official") attributes called data-*. The "*" in data-* is a wildcard that can represent any text as long as it is at least 1 character long and contains no uppercase letters. You can see an example of a data-\* attribute in our example, where we use the data-news attribute to store whether or not the link is "news data":

<a href="#news" data-news="true">News</a>

Unless you have a very good reason to use a custom attribute that is not a data-* attribute, you would be well-advised to just use data-\* when possible.