HTML Tutorial: Building Web Page Structure

Learn HTML (HyperText Markup Language) from basics to advanced concepts. HTML is the standard markup language for creating web pages.

12 Topics
25 min read

Introduction to HTML

HTML (HyperText Markup Language) is the standard markup language for creating web pages and web applications. With HTML, you can create your own website. HTML is easy to learn - you will enjoy it!

Quick Tip

HTML is not a programming language; it's a markup language that defines the structure of your content.

What is HTML?

HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on.

For example, take the following line of content:

My cat is very grumpy

If we wanted the line to stand by itself, we could specify that it is a paragraph by enclosing it in paragraph tags:

<p>My cat is very grumpy</p>

Anatomy of an HTML Element

Let's explore the parts of an HTML element:

  1. Opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets. This states where the element begins or starts to take effect.
  2. Content: This is the content of the element, which in this case is just text.
  3. Closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends.

The element as a whole is: the opening tag, plus the content, plus the closing tag.

HTML Basic Structure

Every HTML document has a required structure that includes the following declaration and elements: <!DOCTYPE html>, <html>, <head>, and <body>.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document Title</title>
</head>
<body>
  <h1>This is a Heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>

DOCTYPE Declaration

The <!DOCTYPE html> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in. In HTML5, the declaration is simple:

<!DOCTYPE html>

Quick Tip

The DOCTYPE declaration is case-insensitive. <!DOCTYPE html>, <!DOCTYPE HTML>, and <!doctype html> all work the same way.

HTML Element

The <html> element is the root element of an HTML page. All other elements must be descendants of this element. It's best practice to add the lang attribute to specify the language of the document:

<html lang="en">
  <!-- Content goes here -->
</html>

Head Element

The <head> element contains meta information about the HTML document, such as its title, scripts, and style sheets:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document Title</title>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js"></script>
</head>

Common Head Elements

  • <title>: Sets the title of the page (appears in the browser tab)
  • <meta>: Provides metadata about the HTML document
  • <link>: Links to external resources like CSS files
  • <script>: Embeds or links to JavaScript code
  • <style>: Contains CSS styling information

Body Element

The <body> element contains the visible content of the HTML document:

<body>
  <header>
    <h1>Website Title</h1>
    <nav>
      <!-- Navigation links -->
    </nav>
  </header>
  
  <main>
    <section>
      <h2>Section Title</h2>
      <p>This is a paragraph of text.</p>
    </section>
    
    <article>
      <h2>Article Title</h2>
      <p>This is an article content.</p>
    </article>
  </main>
  
  <footer>
    <p>© 2024 My Website</p>
  </footer>
</body>

Text Formatting

HTML provides several elements for formatting text, including headings, paragraphs, and various text formatting tags.

Headings

HTML provides six levels of headings, from <h1> (the most important) to <h6> (the least important):

<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<h4>This is a Heading 4</h4>
<h5>This is a Heading 5</h5>
<h6>This is a Heading 6</h6>

Result:

This is a Heading 1

This is a Heading 2

This is a Heading 3

This is a Heading 4

This is a Heading 5
This is a Heading 6

Best Practice

Use headings to create a hierarchical structure for your content. Each page should have only one <h1> element, which is typically the main title of the page.

Paragraphs

The <p> element defines a paragraph:

<p>This is a paragraph. It represents a block of text separated from adjacent blocks by blank lines and/or first-line indentation.</p>
<p>This is another paragraph. HTML automatically adds some space before and after each paragraph.</p>

Result:

This is a paragraph. It represents a block of text separated from adjacent blocks by blank lines and/or first-line indentation.

This is another paragraph. HTML automatically adds some space before and after each paragraph.

Text Formatting Tags

HTML provides several elements for formatting text:

<b>Bold text</b>
<strong>Important text</strong>
<i>Italic text</i>
<em>Emphasized text</em>
<mark>Marked/highlighted text</mark>
<small>Small text</small>
<del>Deleted text</del>
<ins>Inserted text</ins>
<sub>Subscript text</sub>
<sup>Superscript text</sup>
<code>Computer code</code>
<kbd>Keyboard input</kbd>
<samp>Sample output</samp>
<var>Variable</var>
<pre>Preformatted text</pre>

Result:

Bold text

Important text

Italic text

Emphasized text

Marked/highlighted text

Small text

Deleted text

Inserted text

H2O

23 = 8

Computer code

Keyboard input

Sample output

Variable

Preformatted text
  preserves both spaces
    and line breaks

Semantic vs. Presentational

Use semantic elements (<strong>, <em>) instead of presentational elements (<b>, <i>) when possible, as they convey meaning rather than just appearance.

Lists

HTML provides three types of lists:

Unordered Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Result:

  • Coffee
  • Tea
  • Milk

Ordered Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag:

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Result:

  1. First item
  2. Second item
  3. Third item

Description Lists

A description list starts with the <dl> tag. Each description term starts with the <dt> tag, and each description starts with the <dd> tag:

<dl>
  <dt>Coffee</dt>
  <dd>- Black hot drink</dd>
  <dt>Milk</dt>
  <dd>- White cold drink</dd>
</dl>

Result:

Coffee
- Black hot drink
Milk
- White cold drink

Tables

HTML tables allow web developers to arrange data into rows and columns:

<table border="1">
  <caption>Monthly Savings</caption>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

Result:

Monthly Savings
Month Savings
January $100
February $80
Sum $180

Table Elements

  • <table>: Defines a table
  • <caption>: Defines a table caption
  • <thead>: Groups the header content in a table
  • <tbody>: Groups the body content in a table
  • <tfoot>: Groups the footer content in a table
  • <tr>: Defines a row in a table
  • <th>: Defines a header cell in a table
  • <td>: Defines a cell in a table

Important Note

Do not use tables for layout purposes. Tables should be used for tabular data only. For layout, use CSS.

Forms

HTML forms are used to collect user input. The <form> element defines a form that contains form elements.

Form Element

The <form> element is a container for different types of input elements:

<form action="/submit-form" method="post">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname"><br><br>
  
  <input type="submit" value="Submit">
</form>

Result:






Input Types

The <input> element can be displayed in several ways, depending on the type attribute:

<!-- Text input -->
<input type="text" name="username" placeholder="Enter username">

<!-- Password input -->
<input type="password" name="password" placeholder="Enter password">

<!-- Radio buttons -->
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>

<!-- Checkboxes -->
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1">I have a bike</label>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">I have a car</label>

<!-- Date input -->
<input type="date" id="birthday" name="birthday">

<!-- File input -->
<input type="file" id="myfile" name="myfile">

<!-- Number input -->
<input type="number" id="quantity" name="quantity" min="1" max="5">

<!-- Range input -->
<input type="range" id="volume" name="volume" min="0" max="100">

<!-- Color input -->
<input type="color" id="favcolor" name="favcolor">

<!-- Submit button -->
<input type="submit" value="Submit">

<!-- Reset button -->
<input type="reset" value="Reset">

Result:

Form Attributes

The <form> element can have several attributes:

Common Form Attributes

  • action: Specifies where to send the form data when submitted
  • method: Specifies the HTTP method to use when sending form data (GET or POST)
  • target: Specifies where to display the response after submitting the form
  • enctype: Specifies how the form data should be encoded when submitting it to the server
  • autocomplete: Specifies whether a form should have autocomplete on or off
  • novalidate: Specifies that the form should not be validated when submitted

Semantic Elements

Semantic elements clearly describe their meaning in a human- and machine-readable way. They provide information about the content they contain.

Structural Elements

HTML5 introduced several new semantic elements for better document structure:

<header>
  <!-- Header content: logo, navigation, etc. -->
</header>

<nav>
  <!-- Navigation links -->
</nav>

<main>
  <!-- Main content of the page -->
  
  <section>
    <!-- A section of the page -->
  </section>
  
  <article>
    <!-- An independent, self-contained content -->
  </article>
  
  <aside>
    <!-- Content indirectly related to the main content -->
  </aside>
</main>

<footer>
  <!-- Footer content: copyright, contact info, etc. -->
</footer>

Benefits of Semantic Elements

  • Improved accessibility for screen readers and other assistive technologies
  • Better SEO (Search Engine Optimization)
  • Clearer code that is easier to maintain
  • Consistent structure across websites

Text Elements

HTML5 also introduced semantic elements for text content:

<figure>
  <img src="pic.jpg" alt="Description">
  <figcaption>Figure caption</figcaption>
</figure>

<time datetime="2023-01-01">January 1, 2023</time>

<mark>Highlighted text</mark>

<details>
  <summary>Click to expand</summary>
  <p>Additional details that are hidden by default.</p>
</details>

Result:

Placeholder image
Figure caption

This is highlighted text using the mark element.

Click to expand

Additional details that are hidden by default.

Multimedia

HTML5 provides built-in support for audio and video content, as well as embedding external content using iframes.

Audio

The <audio> element is used to embed sound content in an HTML document:

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

Audio Attributes

  • controls: Displays audio controls (play, pause, volume)
  • autoplay: Starts playing the audio automatically
  • loop: Plays the audio again when finished
  • muted: Mutes the audio output
  • preload: Specifies if and how the audio should be loaded when the page loads

Video

The <video> element is used to embed video content in an HTML document:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

Video Attributes

  • controls: Displays video controls (play, pause, volume, etc.)
  • autoplay: Starts playing the video automatically
  • loop: Plays the video again when finished
  • muted: Mutes the video output
  • poster: Specifies an image to be shown while the video is downloading or until the user plays the video
  • width and height: Specify the dimensions of the video player

iframes

The <iframe> element is used to embed another document within the current HTML document:

<iframe src="https://www.example.com" width="600" height="400" title="Example Website">
  Your browser does not support iframes.
</iframe>

Security Warning

iframes can pose security risks. Always use the sandbox attribute and other security measures when embedding content from external sources.

HTML5 Features

HTML5 introduced many new features and improvements:

Key HTML5 Features

  • Semantic elements (<header>, <footer>, <nav>, etc.)
  • Audio and video support
  • Canvas for drawing graphics
  • SVG for vector graphics
  • Local storage for storing data on the client side
  • Web workers for running scripts in the background
  • Geolocation for getting the user's location
  • Drag and drop functionality
  • Form improvements (new input types, attributes, etc.)
  • Web sockets for real-time communication
<!-- Canvas example -->
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;">
  Your browser does not support the canvas element.
</canvas>

<!-- SVG example -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Result:

Best Practices

Following best practices ensures your HTML code is clean, maintainable, and accessible:

HTML Best Practices

  • Always declare the document type with <!DOCTYPE html>
  • Use lowercase for element names and attributes
  • Close all HTML elements
  • Quote attribute values
  • Specify the alt attribute for images
  • Use semantic elements to structure your content
  • Avoid using tables for layout
  • Use CSS for styling instead of HTML attributes
  • Keep your HTML code clean and well-indented
  • Validate your HTML code using tools like the W3C Validator
  • Ensure your website is accessible to all users, including those with disabilities
  • Use meaningful names for IDs and classes
  • Include proper meta tags for SEO and responsiveness
  • Optimize images and other media for web use

Practice Projects

The best way to learn HTML is by practicing. Here are some projects you can try:

HTML Practice Projects

Project 1: Personal Portfolio

Create a simple personal portfolio website with the following sections:

  • Home page with your name and a brief introduction
  • About page with more details about yourself
  • Skills section showcasing your abilities
  • Projects section displaying your work
  • Contact form for visitors to reach out to you

Hint: Use semantic HTML elements like <header>, <nav>, <main>, <section>, and <footer> to structure your website.

Project 2: Recipe Website

Build a recipe website with the following features:

  • Homepage with featured recipes
  • Recipe pages with ingredients, instructions, and images
  • Categories page to browse recipes by type
  • Search form to find specific recipes
  • Contact page for feedback and suggestions

Hint: Use tables for ingredients, ordered lists for instructions, and forms for the search and contact features.

Project 3: Blog Template

Create a blog template with the following components:

  • Homepage with featured blog posts
  • Individual blog post pages with text, images, and comments
  • About page for the blog author
  • Categories and tags for organizing content
  • Subscription form for newsletter sign-up

Hint: Use the <article> element for blog posts and the <time> element for publication dates.

Back to Blog Next: CSS Tutorial