Part 1: Web Foundations & The Skeleton Code

Welcome to Part 1 of our ultimate HTML guide. In this chapter, we will build the absolute foundations of web development.

The 3 Pillars of Web Development

Modern websites commonly use three core technologies that work together:

HTML - HyperText Markup Language
HTML provides the structure and meaning of a webpage. Think of it as the walls, rooms and foundation of a house.
CSS - Cascading Style Sheets
CSS controls the visual presentation of a webpage, including colors, spacing, typography and layout.
JavaScript
JavaScript adds programming logic and interactive behavior to webpages.

What is HTML?

HTML stands for HyperText Markup Language. It is the standard markup language used to structure content on webpages.

HTML tells the browser what different pieces of content represent, such as headings, paragraphs, links, images, lists, tables and forms.

Core Rules of HTML Tags

Opening and Closing Tags
Most HTML elements have an opening tag and a closing tag.
```
<p>Hello World</p>
```
Void Elements
Some HTML elements do not require a closing tag.
```
<br>
<hr>
<img src="image.jpg" alt="Example">
```
Use Lowercase Tags
HTML tag names are generally written in lowercase as a modern coding convention.

Understanding index.html

A common default filename for the main webpage of a website is index.html. Web servers are commonly configured to look for this file when a directory is requested.

HTML5 Boilerplate

A basic modern HTML document can start with the following structure:

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

<body>

    <h1>Hello World!</h1>

    <p>
        This is my first webpage.
    </p>

</body>
</html>

Breaking Down the Boilerplate

<!DOCTYPE html>: Declares that the document uses the HTML standard.
<html>: The root element of the HTML document.
<head>: Contains metadata and information about the document.
<meta charset="UTF-8">: Defines the character encoding of the document.
<meta name="viewport">: Helps the page work properly across different screen sizes.
<title>: Defines the document title shown by the browser.
<body>: Contains the main content displayed on the webpage.

Your First HTML Program

<!DOCTYPE html>
<html>

<head>
    <title>My Website</title>
</head>

<body>

    <h1>Welcome to My Website</h1>

    <p>
        I am learning HTML!
    </p>

</body>

</html>

Part 1 Challenge

Open Notepad or VS Code.
Create a new HTML file.
Write the HTML5 boilerplate.
Add an H1 heading.
Add at least two paragraphs.
Save the file as index.html.
Open the file in a web browser.

Part 2: Text & Typography

Learn how HTML represents headings, paragraphs, emphasis, quotations and other types of text.

Headings

<h1>Main Heading</h1>
<h2>Section Heading</h2>
<h3>Subsection</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Paragraphs

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

Text Formatting

<strong> - Strong importance
<em> - Emphasis
<mark> - Highlighted text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript
<sup> - Superscript

Example

This is important, this is emphasized, and this is highlighted.

Part 3: Links & Navigation

Basic Link

<a href="https://example.com">
    Visit Website
</a>

Opening a Link in a New Tab

<a href="https://example.com" target="_blank">
    Open Website
</a>

Email Link

<a href="mailto:example@email.com">
    Send Email
</a>

Phone Link

<a href="tel:+911234567890">
    Call Us
</a>

Internal Page Link

<a href="about.html">
    About Us
</a>

Part 4: Images & Media

Images

<img src="photo.jpg" alt="A beautiful landscape">

Audio

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
</audio>

Video

<video controls width="500">
    <source src="video.mp4" type="video/mp4">
</video>

Iframe

<iframe
    src="https://example.com"
    title="Example Website">
</iframe>

Part 5: Lists

Unordered List

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Ordered List

<ol>
    <li>Open Editor</li>
    <li>Write HTML</li>
    <li>Save File</li>
</ol>

Description List

<dl>
    <dt>HTML</dt>
    <dd>Markup language for webpages.</dd>
</dl>

Part 6: HTML Tables

<table>

    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Rahul</td>
            <td>18</td>
        </tr>
    </tbody>

</table>

Important Table Elements

<table>
<caption>
<thead>
<tbody>
<tfoot>
<tr>
<th>
<td>

Part 7: HTML Forms

Basic Form

<form>

    <label for="name">Name:</label>

    <input
        type="text"
        id="name"
        name="name">

    <button type="submit">
        Submit
    </button>

</form>

Common Input Types

text
email
password
number
date
radio
checkbox
file
range
color
submit

Other Form Elements

<textarea>
<select>
<option>
<button>
<fieldset>
<legend>

Part 8: Semantic HTML

Semantic HTML uses elements whose names describe the meaning and purpose of their content.

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>
<figure>
<figcaption>

Example

<header>
    Website Header
</header>

<nav>
    Website Navigation
</nav>

<main>

    <article>
        Main Article
    </article>

    <aside>
        Related Information
    </aside>

</main>

<footer>
    Website Footer
</footer>

Part 9: HTML Attributes

Attributes provide additional information about HTML elements.

<element attribute="value">
    Content
</element>

Common Attributes

id
class
title
hidden
style
data-*

Part 10: Layout & Containers

Div

<div>
    Content inside a container
</div>

Span

<p>
    This is
    <span>special text</span>.
</p>

Understanding HTML Structure

HTML documents are organized into parent, child and sibling relationships through element nesting.

Part 11: HTML + CSS

CSS is used to control the visual presentation of HTML.

Inline CSS

<p style="color: red;">
    Hello
</p>

Internal CSS

<style>

    p {
        color: red;
    }

</style>

External CSS

<link rel="stylesheet" href="style.css">

Part 12: HTML + JavaScript

JavaScript allows webpages to respond to user actions and perform programming logic.

Internal JavaScript

<script>

    alert("Hello World!");

</script>

External JavaScript

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

Part 13: SEO & Meta Tags

Meta Description

<meta
    name="description"
    content="Learn HTML from beginner to advanced.">

Viewport

<meta
    name="viewport"
    content="width=device-width, initial-scale=1.0">

Favicon

<link
    rel="icon"
    href="favicon.ico">

Part 14: Accessibility

Accessible HTML helps people with different abilities understand and interact with webpages.

Alternative Text

<img
    src="student.jpg"
    alt="Student studying HTML">

Labels for Forms

<label for="email">
    Email Address
</label>

<input
    type="email"
    id="email"
    name="email">

Semantic Elements

Prefer meaningful semantic elements when they accurately describe the content instead of using generic containers everywhere.

Part 15: Modern & Advanced HTML

Details and Summary

<details>

    <summary>
        What is HTML?
    </summary>

    <p>
        HTML structures webpage content.
    </p>

</details>

Picture Element

<picture>

    <source
        media="(min-width: 800px)"
        srcset="large.jpg">

    <img
        src="small.jpg"
        alt="Example image">

</picture>

Template

<template>

    <p>
        Hidden template content
    </p>

</template>

Dialog

<dialog open>
    This is a dialog.
</dialog>

Part 16: HTML Best Practices

Use meaningful semantic elements.
Keep HTML properly indented.
Use descriptive alt text for meaningful images.
Use labels for form controls.
Maintain a logical heading hierarchy.
Keep structure separate from styling and behavior.
Validate your HTML.
Avoid unnecessary elements.
Write readable and maintainable code.

Part 17: Real World HTML Projects

Now it is time to apply everything you have learned.

Project 1: Personal Profile

Create a webpage containing your name, introduction, hobbies, skills and contact information.

Project 2: Resume

Build a structured resume using headings, lists, links and semantic HTML.

Project 3: Registration Form

Create a registration form using different input types, labels, select menus and validation attributes.

Project 4: Blog Website

Build a complete article page using semantic HTML elements, images, links, headings and sections.

Project 5: Portfolio

Create a multi-section portfolio containing your introduction, projects, skills and contact information.

Final Challenge

Build a complete multi-page website using only HTML. The website should contain:

Home page
About page
Projects page
Contact page
Navigation between pages
At least one form
Images
Tables
Lists
Semantic HTML

HTML Quick Cheat Sheet

Important HTML Elements
Element	Purpose
`<h1>`	Main heading
`<p>`	Paragraph
`<a>`	Hyperlink
`<img>`	Image
`<ul>`	Unordered list
`<ol>`	Ordered list
`<table>`	Table
`<form>`	Form
`<header>`	Header section
`<nav>`	Navigation
`<main>`	Main content
`<section>`	Content section
`<article>`	Independent article/content
`<footer>`	Footer section