HTML Tutorial

Introduction to HTML

HTML - HyperText Markup Language - is the standard language for building web pages, and it's been the backbone of the web since the early 1990s even though it barely resembles what it was back then. It's a markup language meaning you wrap text in tags to tell the browser what kind of thing each piece of content is - this is a heading, this is a paragraph, this is an image - and the browser uses those labels to decide how to display everything. Every webpage you've ever visited is built on HTML at some level, underneath whatever styling and JavaScript is running on top of it.

What is HTML?

  • HyperText - Text that can link to other text - the hyper part refers to the non-linear nature of following links, which was a genuinely new idea when the web was invented.
  • Markup Language - Uses tags to annotate text within a document, defining structure and meaning rather than appearance.
  • HTML Document - A file with a .html extension containing HTML code that browsers read and render as a visual page.

HTML Document Structure: The Foundation of Everything

Every HTML file follows the same basic skeleton - four required pieces that tell the browser what kind of document it's reading, where the metadata lives, and where the visible content is - and getting this structure right before adding anything else is the most important habit to build early. Browsers are forgiving and will render most HTML even when the structure is wrong, which can lull you into thinking the structure doesn't matter, but missing or wrong structure causes subtle rendering inconsistencies across browsers, accessibility problems, and SEO issues that become harder to trace the more complex the page gets.

The Four Pillars of an HTML Document

Every HTML document from a one-paragraph practice page to a complex web application is built on the same four cornerstone pieces. Understanding what each one does and why it's there is the foundation everything else builds on.

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Your Descriptive Page Title Here</title>
7    <link rel="stylesheet" href="styles.css">
8</head>
9<body>
10    <h1>My Main Heading</h1>
11    <p>My first paragraph.</p>
12    <script src="scripts.js"></script>
13</body>
14</html>

1. The DOCTYPE Declaration

The DOCTYPE declaration is the first line of every HTML file and it's not actually an HTML tag - it's an instruction to the browser. In HTML5, it's just five characters inside angle brackets: DOCTYPE html. What it does is tell the browser to render the page in standards mode rather than quirks mode, which is a legacy rendering setting that mimics the inconsistent behavior of old Internet Explorer. Omit it and the browser might fall back to quirks mode, which means CSS box models work differently, dimensions are calculated differently, and your layout looks fine in one browser and wrong in another. One line prevents all of that.

html
1<!DOCTYPE html>

2. The html Element: The Root Container

The html tag wraps everything else in the document and is called the root element because everything branches out from it. The most important attribute to add here is lang, which declares the primary language of the page content. This attribute is used by screen readers to pronounce words correctly and by search engines to serve the page to users who speak that language, and it's one of those small things that takes two seconds to add and has real consequences for accessibility and SEO if you leave it out.

html
1<!DOCTYPE html>
2<html lang="en">
3  <!-- All other code goes inside here -->
4</html>

3. The head Element: The Command Center

The head element holds metadata - information about the document that the browser and search engines need but that never appears as visible content on the page. The two meta tags you should have on every single page are charset UTF-8 (which prevents special characters from appearing as garbled symbols) and the viewport meta tag (which is the single line of code that makes your page mobile-friendly - without it the browser zooms out on mobile and shows a tiny desktop-sized version of the page that users have to pinch-zoom around). The title tag sets what appears in the browser tab and in search engine results, which makes it a real SEO factor worth writing carefully.

html
1<head>
2    <meta charset="UTF-8">
3    <meta name="viewport" content="width=device-width, initial-scale=1.0">
4    <title>My Awesome Website - Homepage</title>
5    <link rel="stylesheet" href="css/styles.css">
6</head>

4. The body Element: The Canvas

The body element contains everything users actually see - text, images, links, navigation, forms, videos, everything. It's the canvas. Every HTML element you'll learn about for building page content goes inside the body. The script tags that load JavaScript also usually go at the bottom of the body rather than in the head, because the browser processes HTML top to bottom and putting scripts in the head means they load and run before the page content is visible, which makes pages feel slow.

html
1<body>
2    <h1>Welcome to My Website</h1>
3    <p>This is a paragraph of text that users can read on the page.</p>
4    <img src="images/hero.jpg" alt="A descriptive alt text">
5    <a href="about.html">Learn more about me</a>
6    <script src="scripts.js"></script>
7</body>

HTML Elements and Tags

HTML elements are the individual labeled pieces of content that make up a page - a heading element, a paragraph element, an image element - and each one is defined by its tags. The opening tag tells the browser the element is starting, the closing tag tells it the element ends, and the content lives between them. Some elements are void elements like img and br that have no content and therefore no closing tag at all. And elements can be nested inside each other, which is how you build the hierarchical structure that makes a webpage more than just a flat list of content chunks.

html
1<!-- Element with opening and closing tags -->
2<p>This is a paragraph element</p>
3
4<!-- Self-closing void element -->
5<img src="image.jpg" alt="Description">
6
7<!-- Nested elements -->
8<div>
9    <h2>Section Heading</h2>
10    <p>Paragraph inside a div</p>
11</div>

Element Structure

  • Opening Tag - Marks the beginning of an element: the tag name inside angle brackets.
  • Closing Tag - Marks the end of an element: same as the opening tag but with a forward slash before the name.
  • Content - Whatever lives between the opening and closing tags - text, other elements, or both.
  • Element - The complete package: opening tag, content, and closing tag together.
  • Void Elements - Elements with no content that don't have or need a closing tag: img, br, hr, input, meta, link.

HTML Attributes

Attributes are additional configuration options that go inside the opening tag and change what an element does or how it behaves. The href attribute on a link says where the link goes. The src attribute on an image says which file to load. The class attribute on a div says which CSS styles to apply. They always follow the same syntax: attribute name, equals sign, value in double quotes. An element can have multiple attributes in any order. Some attributes like disabled and required are boolean - their presence alone enables the feature without needing a value.

html
1<a href="https://www.example.com" target="_blank">Visit Example</a>
2<img src="cat.jpg" alt="A fluffy orange cat">
3<p class="intro-text">This is the introduction.</p>

Common Attributes

  • id - Unique identifier for one specific element. No two elements on the same page should share an id - breaking this rule causes CSS and JavaScript bugs that are hard to trace.
  • class - One or more class names for styling with CSS. Multiple elements can share the same class, which is how you apply the same styles to many things at once.
  • src - The file path or URL for media to load - used on img, script, audio, video, and iframe elements.
  • href - The destination URL for links. Short for Hypertext REFerence - the name is a bit opaque but it becomes automatic quickly.
  • alt - Alternative text for images. Screen readers read this aloud, search engines use it for image indexing, and browsers display it if the image fails to load.
  • style - Inline CSS written directly on the element. Fine for quick tests but keeping styles in a CSS file is much better for any real project.

Headings and Paragraphs

Headings and paragraphs are the most basic text structure elements and you'll use them on essentially every page you build. Headings go from h1 to h6 representing a hierarchy from most important to least, and the heading level should be chosen based on where it sits in the document structure, not based on how big you want the text to look visually - visual size is CSS's job. One h1 per page is the standard recommendation because it's the strongest signal to search engines about what the page is about.

html
1<!-- Headings define hierarchy -->
2<h1>Main Title (Most Important)</h1>
3<h2>Subheading</h2>
4<h3>Section Heading</h3>
5<h4>Sub-section Heading</h4>
6<h5>Minor Heading</h5>
7<h6>Least Important Heading</h6>
8
9<!-- Paragraphs for text content -->
10<p>This is a paragraph of text. It can contain multiple sentences and will be displayed as a block of text with some default spacing.</p>
11
12<p>Another paragraph with more content. Each paragraph gets automatic spacing above and below it from the browser's default styles.</p>

Text Formatting Tags

HTML has a handful of inline text formatting elements that add meaning or style to words within a paragraph. The distinction between b and strong, and between i and em, is worth knowing: b and i are purely presentational (bold, italic), while strong and em carry semantic weight meaning the content is actually important or emphasized - screen readers may announce em and strong text differently. Sub and sup are useful for formulas and footnotes, mark for highlighting, and del and ins for showing changes.

html
1<!-- Text formatting examples -->
2<p>This text contains <b>bold</b>, <strong>strong</strong>, <i>italic</i>, and <em>emphasized</em> text.</p>
3
4<p>You can also <mark>highlight text</mark>, show <small>smaller text</small>, or <del>delete text</del>.</p>
5
6<p>Mathematical formulas: H<sub>2</sub>O and E = mc<sup>2</sup>.</p>
7
8<p><ins>Inserted text</ins> and <u>underlined text</u> have different semantic meanings.</p>

Links and Images

The anchor tag - a for anchor - is how you create links, and the href attribute is what makes it actually go somewhere. Without href you have styled text but not a functional link. The target="_blank" attribute opens the link in a new tab, which is useful but can frustrate users who didn't ask for that, so use it with judgment. Images use the img void element with src for the file path and alt for the description - and alt text is one of the things beginners skip most often, which matters because screen readers depend on it and search engines use it for image indexing.

html
1<!-- Anchor tag for links -->
2<a href="https://example.com" target="_blank" title="Visit Example">Visit Example Website</a>
3
4<!-- Internal page link -->
5<a href="about.html">About Us</a>
6
7<!-- Link to specific section -->
8<a href="#section-1">Jump to Section 1</a>
9
10<!-- Image tag -->
11<img src="images/photo.jpg" alt="Description of image" width="400" height="300">
12
13<!-- Image as link -->
14<a href="portfolio.html">
15    <img src="thumb.jpg" alt="View Portfolio">
16</a>

HTML Lists

HTML has three list types and all three are used regularly. Unordered lists (ul) are for collections where order doesn't matter - features, ingredients, navigation links. Ordered lists (ol) are for sequences where order is meaningful - steps, rankings, instructions. Description lists (dl) are the most overlooked of the three and are specifically for term-description pairs like glossaries, FAQs, and product specs. All three use the li element for items, except dl which uses dt for the term and dd for the description.

html
1<!-- Unordered list (bulleted) -->
2<ul>
3    <li>Item 1</li>
4    <li>Item 2</li>
5    <li>Item 3</li>
6</ul>
7
8<!-- Ordered list (numbered) -->
9<ol>
10    <li>First item</li>
11    <li>Second item</li>
12    <li>Third item</li>
13</ol>
14
15<!-- Description list -->
16<dl>
17    <dt>HTML</dt>
18    <dd>HyperText Markup Language</dd>
19    
20    <dt>CSS</dt>
21    <dd>Cascading Style Sheets</dd>
22</dl>

HTML Tables

Tables are for tabular data - information that has genuine row-and-column relationships where both directions of the grid carry meaning. They got a bad reputation from years of being misused for page layout, which is now done with CSS flexbox and grid, but for actual data like comparison charts, schedules, and datasets with headers they're the right tool. The basic structure is table wrapping tr elements (rows), with th cells for headers and td cells for data. Adding thead, tbody, and tfoot to divide the table into sections is good practice for accessibility and enables browser features like repeating headers in print.

html
1<!-- Basic table structure -->
2<table border="1">
3    <tr>
4        <th>Name</th>
5        <th>Age</th>
6        <th>Country</th>
7    </tr>
8    <tr>
9        <td>John</td>
10        <td>25</td>
11        <td>USA</td>
12    </tr>
13    <tr>
14        <td>Maria</td>
15        <td>32</td>
16        <td>Spain</td>
17    </tr>
18</table>
19
20<!-- Table with colspan and rowspan -->
21<table border="1">
22    <tr>
23        <th colspan="2">Name</th>
24        <th>Age</th>
25    </tr>
26    <tr>
27        <td>John</td>
28        <td>Doe</td>
29        <td rowspan="2">25</td>
30    </tr>
31    <tr>
32        <td>Jane</td>
33        <td>Smith</td>
34    </tr>
35</table>

HTML Forms

Forms are how websites collect user input - login fields, search boxes, registration forms, checkout flows - and the three elements that do most of the work are form (the container that knows where to send data and how), input (the field that collects it), and label (the text that tells users what each field is for). Every input should have a connected label via matching for and id attributes - skipping labels breaks screen reader accessibility and removes the expanded click target on checkboxes and radio buttons that makes them easier to use. Also: always validate form data server-side regardless of what client-side validation you have, because anyone who knows what they're doing can bypass browser validation.

html
1<!-- Basic form structure -->
2<form action="/submit-form" method="POST">
3    <label for="name">Name:</label>
4    <input type="text" id="name" name="name" required>
5    
6    <label for="email">Email:</label>
7    <input type="email" id="email" name="email" required>
8    
9    <label for="message">Message:</label>
10    <textarea id="message" name="message" rows="4"></textarea>
11    
12    <label for="country">Country:</label>
13    <select id="country" name="country">
14        <option value="usa">USA</option>
15        <option value="canada">Canada</option>
16        <option value="uk">UK</option>
17    </select>
18    
19    <button type="submit">Send Message</button>
20</form>

Semantic HTML

Semantic HTML means using elements that describe what the content is, not just how it looks. Before HTML5 most pages were built with divs everywhere - divs for the header, divs for navigation, divs for articles - and a coworker once described my early code as a div lasagna, which was accurate and a little embarrassing. HTML5 gave us header, nav, main, article, section, aside, and footer, all of which tell browsers, screen readers, and search engines what role each chunk of content plays. The practical difference for a sighted user looking at the page is zero, but for accessibility and SEO the difference is significant.

html
1<!-- Semantic HTML structure -->
2<header>
3    <h1>Website Title</h1>
4    <nav>
5        <ul>
6            <li><a href="/">Home</a></li>
7            <li><a href="/about">About</a></li>
8            <li><a href="/contact">Contact</a></li>
9        </ul>
10    </nav>
11</header>
12
13<main>
14    <article>
15        <header>
16            <h2>Article Title</h2>
17            <p>Published on <time datetime="2023-05-15">May 15, 2023</time></p>
18        </header>
19        
20        <section>
21            <h3>Introduction</h3>
22            <p>Article content goes here...</p>
23        </section>
24        
25        <aside>
26            <h4>Related Content</h4>
27            <p>Additional information related to the article</p>
28        </aside>
29    </article>
30</main>
31
32<footer>
33    <p>&copy; 2023 Company Name. All rights reserved.</p>
34</footer>

HTML5 Features

HTML5 is what ended the era of needing Flash or third-party plugins for multimedia - video, audio, and the canvas drawing API are all native now and work without anything extra installed. The new input types are genuinely useful and underused: type="email" validates email format for free and shows the email keyboard on mobile, type="date" gives you a datepicker, type="color" gives you a color picker, and type="range" gives you a slider - all without a line of JavaScript. Canvas is the one that surprises people the most when they realize you can draw on it with JavaScript to build games, charts, and image editors entirely in the browser.

html
1<!-- HTML5 audio element -->
2<audio controls>
3    <source src="audio.mp3" type="audio/mpeg">
4    Your browser does not support the audio element.
5</audio>
6
7<!-- HTML5 video element -->
8<video width="320" height="240" controls>
9    <source src="movie.mp4" type="video/mp4">
10    Your browser does not support the video tag.
11</video>
12
13<!-- HTML5 canvas element -->
14<canvas id="myCanvas" width="200" height="100"></canvas>
15
16<!-- HTML5 form input types -->
17<input type="email" placeholder="Enter your email">
18<input type="date">
19<input type="color" value="#ff0000">
20<input type="range" min="0" max="100" value="50">

Validation and Best Practices

Validating your HTML means running it through a tool like the W3C validator to find structural errors, and I'll be honest I skipped this for a long time because pages looked fine in Chrome - but Chrome is very forgiving and fixes a lot of broken HTML silently, while other browsers and screen readers don't always make the same fixes. The practices that matter most for most projects: always include the full head with charset and viewport meta tags, use semantic elements instead of divs where something more specific fits, write descriptive alt text on every image, keep JavaScript at the bottom of the body or use the defer attribute, and write your title tags carefully since they directly affect search ranking and click-through rates.

html
1<!-- Example of well-structured HTML -->
2<!DOCTYPE html>
3<html lang="en">
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <meta name="description" content="Free HTML tutorial for beginners">
8    <title>Complete HTML Tutorial</title>
9    <link rel="stylesheet" href="styles.css">
10</head>
11<body>
12    <header>
13        <h1>HTML Tutorial</h1>
14    </header>
15    
16    <main>
17        <article>
18            <h2>Introduction to HTML</h2>
19            <p>HTML is the standard markup language for creating web pages.</p>
20        </article>
21    </main>
22    
23    <footer>
24        <p>&copy; 2023 WebDev Education</p>
25    </footer>
26    
27    <script src="script.js"></script>
28</body>
29</html>

Frequently Asked Questions

What is the difference between HTML and XHTML?

XHTML is a stricter XML-based version of HTML that requires every tag to be properly closed, attributes to be quoted, and element names to be lowercase. HTML5 is more forgiving about syntax errors and is what virtually everyone writes today. XHTML was the direction the web was heading in the early 2000s but HTML5 won and XHTML is rarely written now except in some legacy codebases.

Why should I use semantic HTML?

Semantic HTML tells browsers, screen readers, and search engines what your content actually means rather than just how to display it. A div with text in it and an article element with the same text look identical in a browser but the article tells Google it's a standalone piece of content worth indexing and tells screen reader users they're in an article they can navigate. It also makes your own code much easier to read six months later when you've forgotten what each section does.

What are void elements in HTML?

Void elements are HTML elements that can't contain any content and therefore don't have or need a closing tag. The ones you'll use constantly are img, br, hr, input, meta, and link. Writing a closing tag on a void element like img is technically invalid HTML. In HTML5 you can add a trailing slash like br/ but it's optional and most developers just use br.

How do I make my HTML accessible?

The highest-impact things: write descriptive alt text on every image, use semantic elements instead of generic divs, connect every label to its form input with matching for and id attributes, make sure all functionality is reachable by keyboard, and test with an actual screen reader like NVDA or VoiceOver. ARIA attributes are useful for complex interactive components but for most standard page content, correct semantic HTML gives you most of the accessibility you need.

What is the purpose of the DOCTYPE declaration?

DOCTYPE html tells the browser to render the page in standards mode rather than quirks mode. Quirks mode is a compatibility setting that makes browsers behave like old Internet Explorer - CSS works differently, box models are calculated differently, and the same code produces different results in different browsers. One line at the top of every HTML file prevents all of that.

Can I create an HTML file without the full structure?

Browsers will try to render content even without the proper html, head, and body structure - this forgiving behavior is intentional. But the page will be invalid HTML and may render differently across browsers, have poor SEO without a proper title and meta tags, and fail accessibility checks. Always use the full structure. It costs nothing extra and prevents a category of subtle problems.

What happens if I put a visible element like a p tag inside the head?

The browser won't render it as visible content. The head section is only for metadata - title, meta tags, link tags for CSS, script tags. Elements meant to display content that end up in the head are either ignored or cause the browser to implicitly close the head and open the body early, which can produce unpredictable behavior.

Why is JavaScript usually placed at the bottom of the body?

Because browsers process HTML top to bottom. A script tag in the head means the script is downloaded and executed before any visible content loads, which makes the page feel slow - users see a blank page while the script runs. Placing scripts just before the closing body tag lets all the visible content load first. Alternatively the defer attribute on a script tag in the head achieves the same result without moving the script.

Do I need to close all HTML tags?

Most tags need to be closed - p, div, a, h1 through h6, and so on. The exceptions are void elements like img, br, hr, input, meta, and link which have no content to wrap around and therefore neither have nor need a closing tag. Browsers will often fix unclosed regular tags but it's invalid HTML and the browser's guesses about where to close things aren't always what you intended.

What text editor should I use to write HTML?

VS Code is the most widely used and is free. It has HTML syntax highlighting, tag auto-completion, bracket matching, an integrated terminal, and a large ecosystem of extensions. Prettier for auto-formatting and the Live Server extension for seeing changes instantly in the browser are both worth installing immediately. Notepad technically works but you'll work much faster in a dedicated code editor.