HTML | Notion

Module 1: HTML Fundamentals - Laying the Foundation

What is HTML?
- Explanation of HTML (HyperText Markup Language) as the standard markup language for creating web pages.
- Its role in structuring content and providing meaning to the browser.
Role of the DOM (Document Object Model)
- Introduction to the DOM as a programming interface for HTML and XML documents.
- How the browser parses HTML into a tree-like structure (the DOM) that can be manipulated by JavaScript and styled with CSS. (Diagram: Simple visual representation of an HTML structure and its corresponding DOM tree).

Basic Tags:

Headings (<h1> to <h6>): Structuring content hierarchy. Emphasize using <h1> for the most important heading and progressing logically. HTML
```
<h1>Main Title of the Page</h1>
<h2>Section Heading</h2>
<h3>Sub-section Heading</h3>
```

Paragraphs (<p>): Representing blocks of text. HTML

<p>This is the first paragraph of text on the page. It explains the main topic.</p>
<p>Here's another paragraph with more details and information.</p>

Links (<a>): Creating hyperlinks to other web pages or resources. Explain the href attribute and the importance of descriptive anchor text. HTML
```
<a href="<https://www.example.com>" target="_blank">Visit Example Website</a>
<a href="/about">Learn More About Us</a>
```
Lists (<ul>, <ol>, <li>): Presenting information in an organized manner. Differentiate between unordered (<ul>) and ordered (<ol>) lists, and the list items (<li>). HTML
```
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>
```

**Images (`<img>`):** Embedding images in the page. Explain the crucial `src` attribute, the `alt` attribute for accessibility and SEO, and optional attributes like `width` and `height`. ```html <img src="images/logo.png" alt="Company Logo" width="200" height="50"> ```

Practical Exercises:
1. Create a simple HTML file with a main heading, a few subheadings, and paragraphs of text.
2. Add an unordered list of your favorite hobbies and an ordered list of steps to make a simple recipe.
3. Include a link to an external website and a link to another page (even if that page doesn't exist yet).
4. Embed an image (you can use a placeholder image if you don't have one). Remember to add a meaningful alt text.

Module 2: HTML Document Structure - The Blueprint of Your Page

<!DOCTYPE html>:
- Explanation of the document type declaration and its importance in telling the browser which version of HTML the document is using (always use <!DOCTYPE html> for HTML5).
<html>:
- The root element of every HTML page, encompassing all other content.
- The lang attribute for specifying the language of the document (important for accessibility). HTML
  
  <html lang="en">
<head>:
- Contains meta-information about the HTML document, which is not displayed on the page itself but is crucial for the browser, search engines, and other services.
<body>:
- Contains the visible page content.

Meta Tags (<meta>):

Providing metadata about the HTML document, such as character set, viewport settings, description, and keywords. HTML

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A brief description of the page content for SEO.">
<meta name="keywords" content="html, learning, web development, beginner">

Favicons (<link>):
- Adding a small icon that appears in the browser tab. HTML
```
<link rel="icon" href="favicon.ico" type="image/x-icon">
```
Title (<title>):
- Specifying the title that appears in the browser tab or window title bar. Crucial for SEO and user experience. HTML
```
<title>My Awesome Web Page</title>
```
Script Tags (<script>):
- Embedding or linking to JavaScript code for adding interactivity. Explain the importance of placing scripts at the end of the <body> or using async or defer attributes for performance. HTML
```
<script src="js/script.js" defer></script>
```
Style Tags (<style>):
- Embedding CSS styles directly in the HTML document (generally not recommended for large projects; prefer external stylesheets). HTML
```
<style>
  body {
    font-family: sans-serif;
  }
</style>
```
Practical Exercises:
1. Take the HTML file you created in Module 1 and add the basic document structure (<!DOCTYPE html>, <html>, <head>, <body>).
2. Inside the <head>, add appropriate meta tags for character set, viewport, description, and keywords.
3. Set a relevant <title> for your page.
4. Link to a placeholder favicon (you can find a free one online).
5. Add a <script> tag (linking to a non-existent script.js file for now) just before the closing </body> tag.
6. Add a simple <style> tag in the <head> to change the background color of the <body>.

Module 3: Semantic HTML - Giving Meaning to Your Content

Use of Semantic Tags:

Introduction to semantic HTML5 tags that provide meaning and structure to your content, making it more understandable for both browsers and developers.
<article>: Represents a self-contained composition in a document, page, application, or site (e.g., a blog post, a news article).
<section>: Represents a thematic grouping of content, typically with a heading.
<nav>: Represents a section of navigation links.
<aside>: Represents content tangentially related to the main content (e.g., sidebars, pull quotes).
<figure> and <figcaption>: Used to encapsulate images or other media with an optional caption.
<main>: Represents the dominant content of the <body> of a document. There should only be one <main> element per page.
Other important semantic tags: <header>, <footer>, <time>, <mark>, <cite>.

Example: HTML

<body>
  <header>
    <h1>My Blog</h1>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/posts">Posts</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h2>First Blog Post</h2>
        <p>Published on <time datetime="2025-04-10">April 10, 2025</time></p>
      </header>
      <section>
        <p>This is the first section of my blog post...</p>
      </section>
      <section>
        <p>Here's another interesting point...</p>
      </section>
      <figure>
        <img src="images/blog-image.jpg" alt="Image related to the blog post">
        <figcaption>A relevant image caption.</figcaption>
      </figure>
    </article>

    <aside>
      <h3>Related Posts</h3>
      <ul>
        <li><a href="#">Another Post</a></li>
        <li><a href="#">Yet Another One</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2025 My Blog</p>
  </footer>
</body>

Why Semantics Matter for Accessibility:
- Screen readers and other assistive technologies rely on semantic HTML to understand the structure and meaning of the content, allowing users with disabilities to navigate and comprehend the page effectively.
- Using appropriate semantic tags helps convey the purpose of different parts of the page.
Why Semantics Matter for SEO:
- Search engines use semantic HTML to better understand the content and context of a webpage, which can improve search rankings.
- Clear semantic structure helps search engine crawlers identify important content, navigation, and other key elements.