HTML

Welcome to the HTML Fundamentals Course!

If CSS is the styling (paint, fonts, layout) and JavaScript is the behavior (interactivity, logic), HTML (HyperText Markup Language) is the raw structure—the architectural blueprint of every website on the internet.

1. What Is HTML?

HTML stands for HyperText Markup Language:

  • HyperText: Links that connect web pages to one another, allowing non-linear navigation across the web.

  • Markup Language: A system of annotating text using tags to tell web browsers how content should be structured and displayed (e.g., as a heading, paragraph, image, or link).

Browsers (like Chrome, Firefox, or Safari) read HTML documents, parse the code, and render visual web pages for users.

2. The Anatomy of an HTML Tag

An HTML document is constructed using elements. An element typically consists of an opening tag, content, and a closing tag.

  Opening Tag                            Closing Tag
     │                                      │
     ▼                                      ▼
   <p> Hello, world! Welcome to HTML. </p>
       ▲──────────────────────────────▲
                    │
                 Content

Key Rules to Remember:

  1. Closing Tags: Identified by a forward slash (/). Omitting the slash can cause unexpected layout bugs.

  2. Case Sensitivity: Tags are case-insensitive (<P> works), but modern web standards dictate using lowercase (<p>).

  3. Self-Closing Tags: Some elements don't wrap content and therefore do not require a closing tag (e.g., <img />, <br />, <hr />, <input />).

3. The Standard HTML5 Boilerplate Structure

Every valid HTML document requires a specific foundational structure:

HTML 
<!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>Welcome to My Website</h1>
    <p>This is my very first web page built with HTML!</p>
</body>
</html>

Breaking Down the Boilerplate:

  • <!DOCTYPE html>: Tells the browser that this document uses the HTML5 standard.

  • <html lang="en">: The root element wrapping all page content. The lang attribute specifies the primary language for accessibility tools and search engines.

  • <head>: Contains metadata, page titles, character encodings, and external stylesheet links that are not visible directly on the webpage body.

    • <meta charset="UTF-8">: Ensures support for virtually all characters, symbols, and emojis.

    • <meta name="viewport" ...>: Crucial for responsive design across mobile and desktop screens.

    • <title>: Sets the tab name in your browser window and search engine result headlines.

  • <body>: Contains all the visible content (text, images, forms, buttons) shown on the screen.

4. Hands-On Step: Creating Your First Page

1.Create a New File:Use VS Code, Sublime Text, or any plain text editor.

Open your code editor and create a new file named index.html. (Note: index.html is the default root page web servers look for).

2.Paste the Standard HTML5 Structure:Copy the boilerplate structure.

Copy the boilerplate code from Section 3 into your index.html file and save it (Ctrl+S or Cmd+S).

3.Open the File in a Browser:Render the document in your browser.

Double-click your index.html file from your file explorer. It will open in your default browser, displaying your heading and paragraph!

4.Use Browser Developer Tools:Inspect element tree.

Right-click anywhere on your rendered page and select Inspect (or press F12). Look at the Elements tab to see how the browser parsed your raw HTML code into the Document Object Model (DOM).

Next