WEB DEVELOPMENT

HTML5 Fundamentals for Beginners

30 min read Beginner

What is HTML?

HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. Every website you visit is built with HTML at its core. While CSS handles the visual styling and JavaScript adds interactivity, HTML provides the fundamental structure and meaning of your content.

Think of HTML as the skeleton of a web page. Just like a building needs a solid frame before walls and paint are added, a website needs well-structured HTML before any styling or behavior is applied. HTML uses a system of tags (also called elements) to wrap and define different types of content such as headings, paragraphs, images, links, and more.

Tip: HTML5 is the latest version of HTML. It introduced many new semantic elements, multimedia support, and APIs that make web development easier and more powerful. When people say "HTML" today, they almost always mean HTML5.

The Basic Document Structure

Every HTML document follows a standard structure. This structure tells the browser what version of HTML you are using, defines metadata about the page, and contains all the visible content. Here is the minimal structure every HTML page needs:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first web page.</p>
</body>
</html>

Let's break down each part:

<!DOCTYPE html> — Declares that this document uses HTML5. It must be the very first line in your file.
<html lang="en"> — The root element that wraps everything. The lang attribute specifies the page language for accessibility and search engines.
<head> — Contains metadata about the page (title, character set, viewport settings, links to stylesheets). This content is not displayed on the page itself.
<meta charset="UTF-8"> — Specifies the character encoding so the browser can display special characters correctly.
<meta name="viewport"> — Ensures the page scales properly on mobile devices.
<title> — Sets the text that appears in the browser tab.
<body> — Contains all the visible content of your web page.

Semantic HTML5 Elements

One of the biggest improvements in HTML5 was the introduction of semantic elements. These are tags that describe the meaning of their content, not just its appearance. Using semantic elements makes your code easier to read, improves accessibility for screen readers, and helps search engines understand your page structure.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Blog</title>
</head>
<body>
    <header>
        <h1>My Tech Blog</h1>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h2>Latest Articles</h2>

            <article>
                <h3>Getting Started with HTML5</h3>
                <p>Learn the fundamentals of modern web development...</p>
            </article>

            <article>
                <h3>Understanding CSS Grid</h3>
                <p>Master the most powerful layout system in CSS...</p>
            </article>
        </section>

        <aside>
            <h3>About the Author</h3>
            <p>A web developer passionate about teaching.</p>
        </aside>
    </main>

    <footer>
        <p>&copy; 2026 My Tech Blog. All rights reserved.</p>
    </footer>
</body>
</html>

Here is what each semantic element means:

<header> — Introductory content or navigational links, usually at the top of a page or section.
<nav> — A section containing navigation links to other pages or parts of the page.
<main> — The dominant content of the page. There should be only one <main> element per page.
<section> — A thematic grouping of content, typically with a heading.
<article> — A self-contained piece of content that could stand on its own (blog post, news story, comment).
<aside> — Content that is tangentially related to the surrounding content (sidebars, pull quotes).
<footer> — Footer information for the page or section (copyright, contact info, related links).

Tip: Before HTML5, developers used generic <div> tags for everything, relying on class names like class="header" or class="footer". Semantic elements eliminate that guesswork and make your code self-documenting.

Headings and Paragraphs

HTML provides six levels of headings, from <h1> (the most important) to <h6> (the least important). Headings create a hierarchy of information on your page. Search engines and screen readers rely heavily on this hierarchy to understand your content.

<h1>Main Page Title</h1>

<h2>Major Section</h2>
<p>This is a paragraph of text under the major section.
   Paragraphs automatically add spacing above and below.</p>

<h3>Sub-section</h3>
<p>More detailed content goes here. You can have
   multiple paragraphs in a section.</p>
<p>Each <strong>paragraph</strong> is wrapped in its own
   <code>&lt;p&gt;</code> tag.</p>

<h4>Sub-sub-section</h4>
<h5>Even deeper</h5>
<h6>The smallest heading</h6>

Important rules for headings:

Use only one <h1> per page — it should describe the overall page topic.
Do not skip heading levels. Go from <h2> to <h3>, not from <h2> to <h4>.
Use headings for structure, not for making text big or bold. Use CSS for visual styling.

Lists

HTML supports three types of lists. Lists are essential for organizing information clearly.

<!-- Unordered list (bullet points) -->
<ul>
    <li>HTML — Structure</li>
    <li>CSS — Styling</li>
    <li>JavaScript — Interactivity</li>
</ul>

<!-- Ordered list (numbered) -->
<ol>
    <li>Plan your content</li>
    <li>Write the HTML structure</li>
    <li>Add CSS styling</li>
    <li>Add JavaScript behavior</li>
</ol>

<!-- Description list (term-definition pairs) -->
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language, the standard
        language for creating web pages.</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets, used to control
        the visual presentation of HTML elements.</dd>
</dl>

Lists can also be nested inside each other to create sub-items:

<ul>
    <li>Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>Backend
        <ul>
            <li>PHP</li>
            <li>Python</li>
            <li>Node.js</li>
        </ul>
    </li>
</ul>

Links and Navigation

Links are what make the web a "web." The anchor tag <a> creates hyperlinks that connect pages together. The href attribute specifies the destination URL.

<!-- Link to an external website -->
<a href="https://www.example.com">Visit Example.com</a>

<!-- Open link in a new tab -->
<a href="https://www.example.com"
   target="_blank"
   rel="noopener noreferrer">
    Visit Example.com (new tab)
</a>

<!-- Link to another page on your site -->
<a href="/about.html">About Us</a>

<!-- Link to a section on the same page -->
<a href="#contact-section">Jump to Contact</a>

<!-- Further down the page... -->
<section id="contact-section">
    <h2>Contact Us</h2>
</section>

<!-- Email link -->
<a href="mailto:hello@example.com">Send us an email</a>

<!-- Phone link (great for mobile) -->
<a href="tel:+15551234567">Call us: (555) 123-4567</a>

Tip: Always add rel="noopener noreferrer" when using target="_blank". This prevents the linked page from accessing your page's window.opener object, which is a security best practice.

Images

The <img> tag embeds images in your page. It is a self-closing tag, meaning it does not need a closing tag. The two most important attributes are src (the image source) and alt (alternative text for accessibility).

<!-- Basic image -->
<img src="photo.jpg" alt="A sunset over the ocean">

<!-- Image with specific dimensions -->
<img src="logo.png"
     alt="Company Logo"
     width="200"
     height="100">

<!-- Responsive image using the figure element -->
<figure>
    <img src="chart.png"
         alt="Sales data for Q1 2026"
         style="max-width: 100%; height: auto;">
    <figcaption>Figure 1: Sales data for Q1 2026</figcaption>
</figure>

<!-- Responsive images with different sizes -->
<img src="photo-small.jpg"
     srcset="photo-small.jpg 400w,
             photo-medium.jpg 800w,
             photo-large.jpg 1200w"
     sizes="(max-width: 600px) 400px,
            (max-width: 1000px) 800px,
            1200px"
     alt="A responsive photo that loads the right size">

Always include the alt attribute. It is used by screen readers for visually impaired users, and it displays as fallback text if the image fails to load. Write descriptive, meaningful alt text that conveys the purpose of the image.

Forms

Forms are how users interact with your website by submitting data. Whether it is a login page, a search bar, a registration form, or a contact form, the <form> element handles it all.

<form action="/submit" method="POST">
    <!-- Text input -->
    <label for="username">Username:</label>
    <input type="text" id="username" name="username"
           placeholder="Enter your username" required>

    <!-- Email input (with built-in validation) -->
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"
           placeholder="you@example.com" required>

    <!-- Password input -->
    <label for="password">Password:</label>
    <input type="password" id="password" name="password"
           minlength="8" required>

    <!-- Number input -->
    <label for="age">Age:</label>
    <input type="number" id="age" name="age"
           min="13" max="120">

    <!-- Date input -->
    <label for="birthday">Birthday:</label>
    <input type="date" id="birthday" name="birthday">

    <!-- Dropdown select -->
    <label for="country">Country:</label>
    <select id="country" name="country">
        <option value="">Select a country</option>
        <option value="us">United States</option>
        <option value="uk">United Kingdom</option>
        <option value="ca">Canada</option>
    </select>

    <!-- Textarea for longer text -->
    <label for="bio">Bio:</label>
    <textarea id="bio" name="bio" rows="4"
              placeholder="Tell us about yourself..."></textarea>

    <!-- Checkbox -->
    <label>
        <input type="checkbox" name="agree" required>
        I agree to the terms and conditions
    </label>

    <!-- Radio buttons -->
    <fieldset>
        <legend>Preferred contact method:</legend>
        <label>
            <input type="radio" name="contact" value="email"> Email
        </label>
        <label>
            <input type="radio" name="contact" value="phone"> Phone
        </label>
    </fieldset>

    <!-- Submit button -->
    <button type="submit">Create Account</button>
</form>

Tip: Always pair every <input> with a <label> element. The for attribute on the label should match the id of the input. This improves accessibility and also makes the label clickable, which is especially helpful on mobile devices.

Tables

Tables are used to display tabular data — information that naturally belongs in rows and columns. Do not use tables for page layout (that is what CSS Grid and Flexbox are for). Use them only when you genuinely have data that belongs in a grid format.

<table>
    <thead>
        <tr>
            <th>Language</th>
            <th>Type</th>
            <th>Primary Use</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>HTML</td>
            <td>Markup</td>
            <td>Page structure</td>
        </tr>
        <tr>
            <td>CSS</td>
            <td>Stylesheet</td>
            <td>Visual presentation</td>
        </tr>
        <tr>
            <td>JavaScript</td>
            <td>Programming</td>
            <td>Interactivity</td>
        </tr>
        <tr>
            <td>PHP</td>
            <td>Programming</td>
            <td>Server-side logic</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">These are the core web technologies.</td>
        </tr>
    </tfoot>
</table>

Key table elements:

<table> — The container for the entire table.
<thead> — Groups the header row(s).
<tbody> — Groups the body rows (the actual data).
<tfoot> — Groups the footer row(s).
<tr> — A table row.
<th> — A header cell (bold and centered by default).
<td> — A standard data cell.
colspan / rowspan — Attributes that let a cell span multiple columns or rows.

Text Formatting Elements

HTML provides several inline elements for formatting text with semantic meaning:

<p>This text is <strong>strongly important</strong>.</p>
<p>This text is <em>emphasized</em>.</p>
<p>This is <mark>highlighted text</mark>.</p>
<p>This is <small>small print</small>.</p>
<p>This is <del>deleted text</del> and <ins>inserted text</ins>.</p>
<p>This is <sub>subscript</sub> and <sup>superscript</sup>.</p>
<p>Use <code>console.log()</code> to debug.</p>
<p>Use <abbr title="HyperText Markup Language">HTML</abbr> for structure.</p>

<blockquote>
    <p>The best way to predict the future is to invent it.</p>
    <cite>— Alan Kay</cite>
</blockquote>

Putting It All Together

Here is a complete example that combines everything we have learned into a small but realistic web page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Dev Academy</title>
</head>
<body>
    <header>
        <h1>Web Dev Academy</h1>
        <nav>
            <ul>
                <li><a href="#courses">Courses</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#signup">Sign Up</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="courses">
            <h2>Our Courses</h2>
            <article>
                <h3>HTML Fundamentals</h3>
                <p>Learn the building blocks of every website.</p>
                <img src="html-course.jpg"
                     alt="Screenshot of HTML code editor">
            </article>
            <article>
                <h3>CSS Styling</h3>
                <p>Make your websites look beautiful.</p>
            </article>
        </section>

        <section id="signup">
            <h2>Join Today</h2>
            <form action="/register" method="POST">
                <label for="name">Full Name:</label>
                <input type="text" id="name" name="name" required>

                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required>

                <button type="submit">Register</button>
            </form>
        </section>
    </main>

    <footer>
        <p>&copy; 2026 Web Dev Academy</p>
    </footer>
</body>
</html>

Summary and Next Steps

In this tutorial, you have learned the essential building blocks of HTML5:

The basic HTML document structure with DOCTYPE, head, and body
Semantic elements that give meaning to your content
Headings, paragraphs, and text formatting
Ordered, unordered, and description lists
Links for navigation between and within pages
Images with responsive techniques
Forms for collecting user input
Tables for displaying tabular data

With these fundamentals, you can build the structure of any web page. The next step is to learn CSS so you can style your HTML and make it visually appealing. Our next tutorial on Modern CSS Grid Layout will teach you one of the most powerful layout systems available in modern CSS.

Tip: Practice is the best way to learn HTML. Open a text editor, create an HTML file, and experiment with the elements covered in this tutorial. Try building a simple personal page with a header, some content sections, an image, and a contact form.

Previous: Safe Downloads Next: CSS Grid Layout