HTML Learning Guide

What is HTML?

HTML (HyperText Markup Language) is the standard markup language for documents designed to be displayed in a web browser. It defines the structure and content of web pages.

Key Features of HTML:

Describes the structure of a web page
Consists of a series of elements
Elements tell the browser how to display the content
Elements label pieces of content such as "this is a heading", "this is a paragraph", etc.

MDN HTML Documentation

Basic HTML Structure

Every HTML document follows a basic structure. Here's a simple template:

                <!DOCTYPE html> - Defines the document type
                <html lang="en"> - The root element of an HTML page
                <head> - Contains meta information about the document
                  <title>Page Title</title> - Specifies a title for the document
                </head>
                <body> - Contains the visible page content
                  <h1>My First Heading</h1> - Defines a large heading
                  <p>My first paragraph.</p> - Defines a paragraph
                </body>
                </html>
            

Getting Started with HTML

Step 1: Setup

Step 2: Basic Page

Step 3: View in Browser

Set Up Your Environment

You don't need any special tools to write HTML. You can start with:

A text editor (VS Code, Sublime Text, or even Notepad)
A web browser (Chrome, Firefox, Edge, etc.)

                    // Install VS Code (optional but recommended)
                    // Download from: https://code.visualstudio.com/
                

Create Your First HTML File

Create a new file named "index.html" with the following content:

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

View Your Page

To view your HTML page:

Save your file with a .html extension (e.g., index.html)
Double-click the file to open it in your default web browser
Alternatively, right-click the file and choose "Open with" to select a specific browser

You can also use live server extensions in VS Code to automatically reload changes.

Essential HTML Elements

HTML consists of many elements that define the structure and content of a web page. Here are some of the most important ones:

Headings

<h1> to <h6> - Define HTML headings

Paragraph

<p> - Defines a paragraph

Links

<a> - Defines a hyperlink

Images

<img> - Defines an image

Lists

<ul>, <ol>, <li> - Define lists

Divisions

<div> - Defines a section

Span

<span> - Defines an inline section

Forms

<form>, <input> - Create interactive controls

HTML5 Semantic Elements

HTML5 introduced semantic elements that clearly define their content:

Element	Description
<header>	Defines a header for a document or section
<nav>	Defines navigation links
<section>	Defines a section in a document
<article>	Defines an independent, self-contained content
<aside>	Defines content aside from the page content
<footer>	Defines a footer for a document or section
<main>	Specifies the main content of a document

Learning Resources

1

MDN Web Docs

Comprehensive resource for HTML, CSS, and JavaScript documentation.

Visit MDN

2

W3Schools

Beginner-friendly tutorials and references for web technologies.

Visit W3Schools

3

FreeCodeCamp

Free interactive coding courses including HTML and CSS.

Start Learning