HTML - Everything You Need to Know

Dec 16, 2024 — Aakash Verma

Understanding HTML Structure and Elements

When working with a document in tools like Microsoft Word or Google Docs, you might notice the use of various styles—such as headings, paragraphs, footers, and captions. These differences in style help us easily identify the purpose of each section at a glance. However, computers cannot make such distinctions on their own. For a web browser to properly display a webpage, it needs explicit instructions about the role of each piece of content.

Defining Structure with HTML

This is where HyperText Markup Language (HTML) comes in. HTML is a markup language used to describe the structure and layout of a webpage. It organizes content by enclosing it within HTML elements.

HTML Elements and Tags

An HTML element is defined by a tag, which acts as a label to describe the type of content. For example, the <p> tag is used to define a paragraph element. Other common examples of HTML elements include:

<h1>: The main heading (highest level).
<h6>: A subheading (lowest level).
<img>: An image.
<a>: A hyperlink, which can link to other web pages, files, email addresses, and more.

Most HTML elements include opening and closing tags, which specify where the element begins and ends. For example:

<p>This is a paragraph element.</p>

However, some tags—such as <img>—are self-closing and do not require a closing tag.

By wrapping content in these HTML elements, we provide clear instructions to the browser, enabling it to render the webpage with the intended structure and layout.

A basic HTML file

Let’s examine a basic HTML file to get a better understanding of how to use markup to define the structure of a web page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Line by line explanation

Line 1: <!DOCTYPE html> is referred as a doctype declaration. This is used to indicate to a browser what HTML version the file is written in. For this file, specifying html indicates that the file is written in HTML5.

Line 2: Take particular note of how the closing tag for the <html> is on the last line of the file. One of the properties of HTML elements is their ability to be nested. In other words, HTML elements can exist within other HTML elements. This gives rise to an interesting structure, referred to most commonly as a tree.

In an HTML file, we indicate the root element with the tag <html>. Within this root element, there are multiple elements, that can be considered branches of the root node:

To properly define an HTML file, we must place <head> and <body> elements within the root <html> element.

The <head> element contains supporting information about the file, commonly referred to as metadata. There must be a <title> (providing the web page a title) directly underneath the <head> element in order be complete. The <head> element may also contain links to JavaScript files and CSS stylesheets.

The <body> element contains the main content of an HTML file. This is the element that holds the information that is rendered by your web browser. There can be only one <body> element within an HTML file, and most of the HTML you write will exist within this element.

Heading

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>h1 - h6 headings</title>
  </head>
  <body>
    <h1>Heading Level 1</h1>
    <h2>Heading Level 2</h2>
    <h3>Heading Level 3</h3>
    <h4>Heading Level 4</h4>
    <h5>Heading Level 5</h5>
    <h6>Heading Level 6</h6>
  </body>
</html>

Output

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

Lists

Unordered lists

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Grocery Items</h1>
    <ul>
      <li>Butter</li>
      <li>Milk</li>
      <li>Eggs</li>
      <li>Cereal</li>
    </ul>
  </body>
</html>

Ordered lists

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>How to Brush Your Teeth</title>
  </head>
  <body>
    <h1>Brushing Instructions</h1>
    <ol>
      <li>Acquire toothbrush and toothpaste</li>
      <li>Squeeze a small amount of paste onto the toothbrush bristles</li>
      <li>Lightly rinse brush + paste with water</li>
      <li>Move brush against teeth in a back and forth motion</li>
    </ol>
  </body>
</html>

List element attributes: `type` and `start`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Things to Get from Grocery Store</title>
  </head>
  <body>
    <h1>Grocery Items</h1>

    <!-- Disc bullets -->
    <ul type="disc">
      <li>Butter</li>
      <li>Milk</li>
      <li>Eggs</li>
      <li>Cereal</li>
    </ul>

    <!-- Square bullets -->
    <ul type="square">
      <li>Butter</li>
      <li>Milk</li>
      <li>Eggs</li>
      <li>Cereal</li>
    </ul>
  </body>
</html>

Ordered list type values can be used to change the numbering scheme, and include the following:

1: Default numeric scheme
I: Upper-case roman numerals
i: Lower-case roman numerals
A: Upper-case alphabet
a: Lower-case alphabet

Ordered lists have an additional start attribute, that can be used to start the numbering at a value other than the default of 1.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>How to Brush Your Teeth</title>
  </head>
  <body>
    <h1>Brushing Instructions</h1>

    <!-- Upper-case Roman Numerals -->
    <ol type="I">
      <li>Acquire toothbrush and toothpaste</li>
      <li>Squeeze a small amount of paste onto the toothbrush bristles</li>
      <li>Lightly rinse brush + paste with water</li>
      <li>Move brush against teeth in a back and forth motion</li>
    </ol>

    <!-- Lower-case Alphabet -->
    <ol type="a">
      <li>Acquire toothbrush and toothpaste</li>
      <li>Squeeze a small amount of paste onto the toothbrush bristles</li>
      <li>Lightly rinse brush + paste with water</li>
      <li>Move brush against teeth in a back and forth motion</li>
    </ol>

    <!-- Default numeric scheme, starting at 5 -->
    <ol type="1" start="5">
      <li>Acquire toothbrush and toothpaste</li>
      <li>Squeeze a small amount of paste onto the toothbrush bristles</li>
      <li>Lightly rinse brush + paste with water</li>
      <li>Move brush against teeth in a back and forth motion</li>
    </ol>
  </body>
</html>

Inline vs. Block Elements and Divs

Block-level elements

Block-level HTML elements take up the full width of a web page, essentially creating a “block” around the content you place within that element. The following are some of the block-level elements:

Headings (<h1>-<h6>)
Ordered and unordered Lists (<ol>, <ul>)
List items (<li>)
Paragraphs (<p>)

Inline elements

Inline elements, like the name suggests, do not take up the full width of a webpage and are generally in-line with text content. Inline elements also do not start a new line when rendered in the browser. Examples of inline elements include:

Anchors (<a>)
Images (<img>)
Bolding text (<strong>)
Emphasizing text (<em>)

The coding example below helps illustrate the differences between block-level and inline HTML elements:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Block-level vs Inline HTML Element Rendering</title>
  </head>
  <body>
    <p>This is a block-level element. It takes up the width of the page</p>
    <p>
      This element (also block-level), is rendered a line below the previous
      element
    </p>
    <p>
      <strong>Inline elements</strong> often times exist
      <em>within</em> block-level elements
      <a
        href="https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements"
        >and they do not start on a new line of the web page.</a
      >
    </p>
  </body>
</html>

Divs

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Grouping Content with Divs</title>
  </head>
  <body>
    <div>
      <h1>Group A</h1>
    </div>
    <div>
      <h1>Group B</h1>
    </div>
  </body>
</html>

As we can see, the <div> element does not render as anything special on the web page and is mainly used to separate content into distinct groups for organization or styling purposes. Generally, we will nest other HTML elements within <div> elements to provide the proper structure to our page.

id and class Attributes

The id attribute provides you with the ability to give any element a unique identifier. This identifier can later be used for things like applying specific styles with CSS or capturing input with some Javascript code.

The `id` attribute

<h1 id="companyName">Innoskrit</h1>

Some notes about `id` usage:

An id value should only be used for a single element (you will get unexpected behavior if you use the same id value for multiple elements).
An id value must not contain any whitespace.
A single element cannot have multiple id values.

The `class` attribute

The class attribute is similar to the id attribute in that it is used to identify specific elements. The main distinctions are:

The same class value can be used across multiple elements.
An element can have multiple class values, separated by whitespaces.

In the example below, the id and class attributes are used to apply CSS styles (hidden) to our HTML document. Take note of the main differences between the two attributes.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Grouping Content with Divs</title>
  </head>
  <body>
    <!-- id elements can be used to identify specific elements on page -->
    <h1 id="pageTitle">id and class attributes</h1>

    <!-- class elements can be used to identify multiple elements that have
				similar characteristics -->
    <p class="bordered">This element has a border.</p>

    <!-- the same class value can be used on multiple elements -->
    <p class="bordered">This element also has a border.</p>

    <!-- you can include multiple class values for a single element -->
    <p class="red bordered">This element has red text and a border.</p>
    <p class="blue bordered">This element has blue text and a border.</p>
  </body>
</html>

Link the below CSS using link tag in the head tag in the above HTML. You can do so by pasting the below code in style.css and link it to the HTML code by adding <link rel="stylesheet" href="style.css" /> in the head tag.

.bordered {
    border: 1px solid black;
}

.red {
    color: red;
}

.blue {
    color: blue;
}

The `img` Element

Images in HTML

Use the <img> tag to embed an image into your web page with an src attribute that contains a file path to the image you want to be included. Use the alt attribute to provide alternative text with a description of the image in case it doesn’t load, or is being read by a screen reader for people with disabilities.

<!-- Incorrect img declaration -->
<img src="path/to/image/cat.jpg" alt="A cat"></img>

<!-- Correct img declaration -->
<img src="path/to/image/cat.jpg" alt="A cat">

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Waterfall Photography</title>
  </head>
  <body>
    <h1>Waterfall Photography</h1>
    <div class="imgContainer">
      <img src="longexposurewaterfall1.jpg" alt="Long Exposure Waterfall" />
      <h4 class="caption">Learn how to take stunning waterfall pictures!</h4>
    </div>
  </body>
</html>

Delving into Semantics

`header` and `nav`

<header>
  <hgroup>
    <h1>My Amazing Website</h1>
    <h2>More information about my website</h2>
  </hgroup>
  <nav>
    <!-- Navigational anchors elments are often wrapped in an unordered list -->
    <ul>
      <li><a href="#about">About Me</a></li>
      <li><a href="#contact">Contace</a></li>
    </ul>
  </nav>
</header>

`<footer>`

<footer>
  <h3>&copy; My Company Name, 2024</h3>
</footer>

`<article>`

<article>
  <h1>Cryptocurrency: What is it?</h1>
  <!-- Article contents -->
</article>

`<section>`

<section>
  <h2>Chapter 1</h2>
  <!-- Chapter contents -->
</section>
<section>
  <h2>Chapter 2</h2>
  <!-- Chapter contents -->
</section>
<section>
  <h2>Chapter 3</h2>
  <!-- Chapter contents -->
</section>
<section>
  <h2>Chapter 4</h2>
  <!-- Chapter contents -->
</section>

`<time>`

<!-- time of an event -->
<p>The party begins at <time datetime="19:00">seven o'clock</time>!</p>

<!-- date of publication -->
<h1>My Blog Entry</h1>
<h2><time datetime="2015-05-07">May 7, 2015</time></h2>

Complete Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Semantics</title>
    <script
      type="text/javascript"
      src="https://code.jquery.com/jquery-1.12.0.js"
    ></script>
  </head>
  <body>
    <header>
      <hgroup>
        <h1>Learning Web Development</h1>
        <h2>
          A site dedicated to learning how to develop applications for the web.
        </h2>
      </hgroup>
      <nav>
        <ul>
          <li><a href="">Home</a></li>
          <li><a href="">About This Site</a></li>
          <li><a href="">Contact Information</a></li>
        </ul>
      </nav>
    </header>
    <article>
      <hgroup>
        <h1>Using Semantic HTML Elements</h1>
        <h2>
          A complete guide on indicating meaning for your web page's content
        </h2>
        <h3><time datetime="2024-12-18">December 18, 2024</time></h3>
      </hgroup>

      <section>
        <h4><code>header</code></h4>
        <p>
          Use header elements for content that is consistent across your web
          page.
        </p>
        <p>Headers may also contain your site's navigation components.</p>
      </section>

      <section>
        <h4><code>footer</code></h4>
        <p>
          Use footer elements to store "footer" content, like author/copyright
          info.
        </p>
      </section>

      <section>
        <h4><code>nav</code></h4>
        <p>
          Use nav elements to store elements associated with site navigation.
        </p>
        <p>
          Navigational <code>anchor</code> tags are often wrapped in an
          unordered list element.
        </p>
      </section>
    </article>
    <footer>
      <p>&copy; innoskrit.in 2024</p>
    </footer>
  </body>
</html>

HTML Tables

So how do we apply these concepts into HTML? First, we need to declare an HTML table by using the <table> tag.

<table></table>

To add a row to our table, use the <tr> tag.

<table>
    <tr></tr>
</table>

To add individual pieces of data (the cells) corresponding to the columns, use the <td> tag.

<table>
    <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
</table>

To indicate that a cell is part of the header, use the <th> tag instead of <td>.

Full Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Table</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Name</th>
        <th>Date of Birth</th>
        <th>Weight</th>
      </tr>
      <tr>
        <td>Mary</td>
        <td>12/13/1994</td>
        <td>130</td>
      </tr>
      <tr>
        <td>Alice</td>
        <td>05/04/1986</td>
        <td>110</td>
      </tr>
      <tr>
        <td>Michael</td>
        <td>10/11/2001</td>
        <td>160</td>
      </tr>
      <tr>
        <td>Ingrid</td>
        <td>10/20/1992</td>
        <td>145</td>
      </tr>
    </table>
  </body>
</html>

HTML Forms

HTML forms are how we receive user input on our web pages.

Let's try to create a Login page. To start accepting user input, we will add an <input> element that accepts text:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Login Page</title>
  </head>
  <body>
    <h1>Login Page</h1>
    <form>
      <input type="text" id="firstTextInput" name="firstTextInput" />
    </form>
  </body>
</html>

Let’s add a <label> element to better indicate the <input>'s meaning:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Login Page</title>
  </head>
  <body>
    <h1>Login Page</h1>
    <form>
      <label for="username">
        Username:
        <input type="text" id="username" name="username" />
      </label>
    </form>
  </body>
</html>

Let's add password input field as well.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Login Page</title>
  </head>
  <body>
    <h1>Login Page</h1>
    <form>
      <label for="username">
        Username:
        <input type="text" id="username" name="username" />
      </label>
      <label for="password">
        Password:
        <input type="password" id="password" name="password" />
      </label>
    </form>
  </body>
</html>

Text inputs

`<input>`

We’ve seen how the <input> element can accept text values. There are several different type values that can be used, including:

text: For plain text.
password: To obscure a password input field.
search: To indicate the text field is used for searching a page/multiple pages.
url: To validate input as a URL address.
tel: For inputting phone numbers.
email: To validate input as an email address.

In the case of url and email, the browser will check to see if the input is a valid URL or email address.

Email Validation

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Email Validation</title>
  </head>
  <body>
    <form>
      <p>Try inputting text that isn't email and press 'Enter'</p>
      <label for="email">
        E-mail Address:
        <input type="email" id="email" name="email" />
      </label>
    </form>
  </body>
</html>

URL Validation

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>URL Validation</title>
  </head>
  <body>
    <form>
      <p>Try inputting text that isn't a valid URL and press 'Enter'</p>
      <label for="url">
        URL:
        <input type="url" id="url" name="url" />
      </label>
    </form>
  </body>
</html>

`<textarea>`

If you want your user to be able to include new lines (by pressing “return” or “Enter”) in their text input, you can use a <textarea> element:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Textarea</title>
  </head>
  <body>
    <form>
      <label for="multiLineInput">
        <p>This is an input element that can include new lines:</p>
        <textarea id="multiLineInput"></textarea>
      </label>
    </form>
  </body>
</html>

You can also specify the size of <textarea> by using the rows and cols attributes.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Textarea</title>
  </head>
  <body>
    <form>
      <label for="multiLineInput">
        <p>This is an input element that can include new lines:</p>
        <textarea rows="5" cols="50" id="multiLineInput"></textarea>
      </label>
    </form>
  </body>
</html>

Buttons

A <button> element should be used whenever you want to create a clickable button to perform some action on the page.

<button> elements are simple to define, and have three different type values:

submit: Submits form data to a server.
reset: Resets all the data in the current form.
button : No default behavior.

Submit Button

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Buttons</title>
  </head>
  <body>
    <form>
      <label for="firstName">First Name:</label>
      <input type="text" name="firstName" id="firstName" />
      <label for="lastName">Last Name:</label>
      <input type="text" name="lastName" id="lastName" />
      <!-- This button will submit the form, causing page to redirect -->
      <button type="submit">Submit Name</button>
    </form>
  </body>
</html>

Reset Button

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Buttons</title>
  </head>
  <body>
    <form>
      <label for="firstName">First Name:</label>
      <input type="text" name="firstName" id="firstName" />
      <label for="lastName">Last Name:</label>
      <input type="text" name="lastName" id="lastName" />
      <!-- This button will reset the form -->
      <button type="reset">Reset</button>
    </form>
  </body>
</html>

Default Button

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Buttons</title>
  </head>
  <body>
    <form>
      <label for="firstName">First Name:</label>
      <input type="text" name="firstName" id="firstName" />
      <label for="lastName">Last Name:</label>
      <input type="text" name="lastName" id="lastName" />
      <!-- This button does nothing by default -->
      <button type="button">Do Nothing</button>
    </form>
  </body>
</html>

Selection inputs

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Selection Input</title>
  </head>
  <body>
    <form>
      <label for="selector">
        <p>
          A <code>select</code> element allows users to input from a selection:
        </p>
        <select id="selector">
          <option>Option 1</option>
          <option>Option 2</option>
          <option selected>Option 3</option>
          <option>Option 4</option>
        </select>
      </label>
    </form>
  </body>
</html>

Additionally, if you want to group options into different categories, you can nest <option> elements in an <optgroup> element:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Selection Input</title>
  </head>
  <body>
    <form>
      <label for="selector">
        <p>
          A <code>select</code> element allows users to input from a selection:
        </p>
        <select id="selector">
          <optgroup label="Group 1">
            <option>Option 1</option>
            <option>Option 2</option>
          </optgroup>
          <optgroup label="Group 2">
            <option>Option 3</option>
            <option>Option 4</option>
          </optgroup>
          <optgroup label="Group 3">
            <option>Option 5</option>
            <option>Option 6</option>
          </optgroup>
        </select>
      </label>
    </form>
  </body>
</html>

Radio buttons

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Radio Buttons</title>
  </head>
  <body>
    <form>
      <h3>What time is best to give you a call?</h3>
      <label for="morning">
        Morning
        <input type="radio" id="morning" name="callTime" checked />
      </label>
      <label for="afternoon">
        Afternoon
        <input type="radio" id="afternoon" name="callTime" />
      </label>
      <label for="evening">
        Evening
        <input type="radio" id="evening" name="callTime" />
      </label>
    </form>
  </body>
</html>

Checkbox Buttons

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Checkbox</title>
  </head>
  <body>
    <form>
      <h3>Select all the times that you are available:</h3>
      <label for="morning">
        Morning
        <input type="checkbox" id="morning" name="callTime" checked />
      </label>
      <label for="afternoon">
        Afternoon
        <input type="checkbox" id="afternoon" name="callTime" />
      </label>
      <label for="evening">
        Evening
        <input type="checkbox" id="evening" name="callTime" />
      </label>
    </form>
  </body>
</html>

HTML - Everything You Need to Know