HTML Basics – ElimuTech LMS

Protected: Web Development Bootcamp: Master HTML, CSS, and JavaScript in 3 Weeks

About Lesson

1. Anatomy of an HTML Document

An HTML document is the backbone of any webpage. It provides the structure and content that is displayed in web browsers. Let’s break down the key parts of an HTML document and understand its anatomy.

1. Doctype Declaration

At the very beginning of an HTML document, we declare the document type (or DOCTYPE). This tells the web browser what version of HTML the document is using.

<!DOCTYPE html>

The <!DOCTYPE html> declaration tells the browser that the page is written in HTML5, the latest version of HTML.

2. `<html>` Element

The <html> element is the root element of an HTML document. All the content in the document will be enclosed within the <html> tags.

<html>
  <!-- All content goes here -->
</html>

The opening <html> tag marks the beginning of the document.
The closing </html> tag marks the end of the document.

3. `<head>` Element

The <head> section contains meta-information about the document, such as metadata, links to stylesheets, and scripts that are not directly visible on the webpage. It helps the browser understand how to interpret the content and includes non-visible resources.

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Example webpage">
  <title>My Webpage</title>
  <link rel="stylesheet" href="styles.css">
</head>

Key Elements in the `<head>`:

<meta>: Provides metadata such as character encoding and page description.
- Example: <meta charset="UTF-8"> defines the character encoding.
<title>: Defines the title of the page that appears in the browser tab.
- Example: <title>My Webpage</title>
<link>: Used to link external resources like CSS stylesheets.
- Example: <link rel="stylesheet" href="styles.css"> links an external CSS file.
<script>: Links JavaScript files or includes inline scripts (usually placed at the end of the <body> to optimize page load).
- Example: <script src="script.js"></script>

4. `<body>` Element

The <body> element contains the visible content of the webpage, such as text, images, links, and interactive elements. This is the section that users will see and interact with when they visit the webpage.

<body>
  <h1>Welcome to My Website</h1>
  <p>This is a simple webpage.</p>
</body>

Common Elements Inside `<body>`:

<h1> to <h6>: Headings (h1 is the largest, h6 is the smallest).
- Example: <h1>This is a Heading</h1>
<p>: Paragraphs of text.
- Example: <p>This is a paragraph of text.</p>
<a>: Hyperlinks (anchors).
- Example: <a href="https://www.example.com">Click here</a>
<img>: Images.
- Example: <img src="image.jpg" alt="Image Description">
<ul>, <ol>, <li>: Lists (unordered or ordered).
- Example:
```
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
```

5. Full Example of an HTML Document Structure

Here’s a simple HTML document structure that combines all the above elements:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="This is an example webpage">
    <title>My Webpage</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <h1>Welcome to My Website</h1>
      <p>This is a simple webpage designed to demonstrate the structure of an HTML document.</p>
    </header>

    <main>
      <section>
        <h2>About Me</h2>
        <p>I am a web developer learning HTML!</p>
      </section>

      <section>
        <h2>My Projects</h2>
        <ul>
          <li>Project 1</li>
          <li>Project 2</li>
          <li>Project 3</li>
        </ul>
      </section>
    </main>

    <footer>
      <p>© 2025 My Website</p>
    </footer>
    
    <script src="script.js"></script>
  </body>
</html>

Breakdown of the Example:

<!DOCTYPE html>: Declares the HTML version.
<html lang="en">: Defines the root element with the language set to English.
<head>: Contains metadata like character set, page description, and external files (CSS and JavaScript).
<body>: The content section of the page, including:
- <header>: Contains the introductory content (e.g., page title and description).
- <main>: The main content section of the webpage.
- <section>: Used to group related content together.
- <footer>: Contains footer information like copyright or contact details.
<script src="script.js"></script>: Links to an external JavaScript file.

Summary of HTML Document Anatomy:

Doctype: Declares the HTML version.
<html>: Root element that wraps the entire document.
<head>: Contains metadata, links to stylesheets, and scripts.
<body>: Contains visible content for the user.
Elements like headers, paragraphs, lists, images, and links are commonly used within the body.

2. Essential HTML Tags: `<html>`, `<head>`, and `<body>`

In an HTML document, three of the most essential and fundamental tags are the <html>, <head>, and <body> tags. These tags form the structure of an HTML document and help organize content for both the browser and search engines.

1. `<html>` Tag

The <html> tag is the root element of an HTML document. Everything inside the <html> element constitutes the entire web page. This tag contains two primary sections: the <head> and <body>.

Purpose of the `<html>` tag:

It encapsulates the entire document, signaling the start and end of an HTML page.
The <html> tag should be placed at the beginning of the document and closed at the very end.

Syntax:

<html>
  <!-- Content goes here -->
</html>

Common Attributes:

lang: Specifies the language of the document. This is important for accessibility, search engines, and browsers.
- Example: <html lang="en"> for English.

2. `<head>` Tag

The <head> tag contains meta-information about the document that isn’t directly displayed on the web page but is essential for the proper functioning and SEO of the site.

Purpose of the `<head>` tag:

It contains metadata such as the character set, author information, description, and links to external resources like CSS files and JavaScript.
It helps search engines and browsers understand and properly render the page.

Common Elements Inside `<head>`:

<meta>: Provides metadata like character encoding, viewport settings, and page description.
<title>: Specifies the title of the document that appears in the browser tab.
<link>: Links to external resources like CSS files.
<script>: Links to or includes JavaScript files (though it’s often placed at the end of the <body> for performance reasons).

Syntax:

<head>
  <meta charset="UTF-8"> <!-- Sets character encoding -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Mobile responsiveness -->
  <title>My Webpage</title> <!-- Page title in the browser tab -->
  <link rel="stylesheet" href="styles.css"> <!-- Links external CSS -->
</head>

3. `<body>` Tag

The <body> tag is where all the content of the web page is placed. This is the section visible to users in the web browser.

Purpose of the `<body>` tag:

It contains all the actual content that users interact with, including text, images, forms, links, videos, and other elements.
It defines the structure and layout of the content that users will see and interact with.

Common Elements Inside `<body>`:

<h1> to <h6>: Header tags for headings.
<p>: Paragraph text.
<a>: Anchor tag for links.
<img>: Image tag for displaying images.
<ul>, <ol>, <li>: Lists.
<div>, <section>, <article>: Used to group content into sections.

Syntax:

<body>
  <h1>Welcome to My Website</h1>
  <p>This is a simple webpage demonstrating the basic HTML tags.</p>
  <a href="https://www.example.com">Click here for more information</a>
</body>

How These Tags Work Together:

Here’s a simplified example of how these three tags are used in a typical HTML document:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A simple webpage example">
    <title>My Webpage</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <h1>Welcome to My Website</h1>
      <p>This is a simple webpage designed to demonstrate the structure of an HTML document.</p>
    </header>

    <section>
      <h2>About Us</h2>
      <p>We are a web development team specializing in creating engaging websites.</p>
    </section>

    <footer>
      <p>&copy; 2025 My Webpage</p>
    </footer>
  </body>
</html>

Explanation:

<!DOCTYPE html>: Declares the document as an HTML5 document.
<html lang="en">: Specifies that the content is in English.
<head>: Contains metadata, including the title and links to external stylesheets.
<body>: Contains visible content such as headings, paragraphs, and other elements.

Summary of Essential Tags:

<html>: The root element that encapsulates the entire document.
<head>: Contains metadata about the document and links to external files like stylesheets and scripts.
<body>: Contains all visible content, including text, images, links, and other interactive elements.

3. Writing Your First HTML Webpage

Creating your first HTML webpage is an exciting step in web development. Below is a simple guide to help you write and structure your first HTML page.

Step-by-Step Guide to Writing Your First HTML Webpage

1. Open Your Text Editor

To write HTML, you’ll need a text editor. You can use any text editor, but it’s recommended to use a code editor like VS Code, Sublime Text, or Notepad++. These editors have features that make coding easier, such as syntax highlighting and autocompletion.

2. Create a New File

Create a new file in your editor and save it with the .html extension, e.g., index.html. This tells your text editor and the browser that the file is an HTML document.

3. Write the Basic HTML Structure

Start by writing the basic structure of an HTML page, which includes the essential tags: <!DOCTYPE html>, <html>, <head>, and <body>.

Here’s a simple template for your first webpage:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="My First Webpage">
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Welcome to My First Webpage!</h1>
    <p>This is a simple webpage to get you started with HTML.</p>
    <a href="https://www.example.com">Visit Example Website</a>
  </body>
</html>

4. Understanding the Code:

<!DOCTYPE html>: Tells the browser that this is an HTML5 document.
<html lang="en">: Defines the document as an HTML document with the language set to English.
<head>: Contains metadata about the webpage (character encoding, title, description, etc.).
<meta charset="UTF-8">: Specifies the character encoding (UTF-8 is the standard).
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Makes the webpage responsive on mobile devices.
<title>: Sets the title of the webpage (visible in the browser tab).
<body>: Contains the visible content of the page:
- <h1>: A header that introduces the page.
- <p>: A paragraph of text explaining the page.
- <a>: A link that points to an external website.

5. Save and Preview

Save the file with the .html extension (e.g., index.html).
Open the file in your web browser by double-clicking on it. Your page will load and display the content you created.

Customization Ideas

Change the Title: Modify the <title> tag to change the title that appears in the browser tab.
```
<title>My Personal Webpage</title>
```
Add More Content: Experiment by adding more headings, paragraphs, and images. For example:
```
<h2>About Me</h2>
<p>Hello, my name is John Doe. I am a beginner web developer.</p>
```
Adding an Image: You can add images using the <img> tag. Ensure you have an image file in the same directory or link to an external image.
```
<img src="profile.jpg" alt="Profile Picture">
```
Add Styles: You can add inline styles or link an external CSS file to style your webpage. For example, add a style attribute directly to a tag:
```
<h1 style="color: blue;">Welcome to My First Webpage!</h1>
```

Full Example with Customizations

Here’s an updated version of the code with some of the customizations mentioned:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="My First Webpage">
    <title>My Personal Webpage</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <h1 style="color: blue;">Welcome to My First Webpage!</h1>
    </header>
    <main>
      <section>
        <h2>About Me</h2>
        <p>Hello, my name is John Doe. I am a beginner web developer and I’m excited to learn more about web development!</p>
      </section>
      <section>
        <h2>My Hobbies</h2>
        <ul>
          <li>Coding</li>
          <li>Reading</li>
          <li>Traveling</li>
        </ul>
      </section>
      <section>
        <h2>Contact Me</h2>
        <p>Feel free to <a href="mailto:john.doe@example.com">email me</a> for more information.</p>
      </section>
    </main>
    <footer>
      <p>&copy; 2025 John Doe</p>
    </footer>
  </body>
</html>

In this Example:

Styles: I added an inline style to change the color of the <h1> heading.
Sections: The page now has multiple sections: “About Me”, “My Hobbies”, and “Contact Me”.
Contact Link: The <a> tag has been used to create an email link.

Next Steps

Once you’re comfortable with creating a basic HTML webpage:

Learn CSS to style your webpage (changing colors, fonts, layouts).
Learn JavaScript to add interactivity (e.g., form validation, animations, dynamic content).

1. Anatomy of an HTML Document

1. Doctype Declaration

2. <html> Element

3. <head> Element

Key Elements in the <head>:

4. <body> Element

Common Elements Inside <body>:

5. Full Example of an HTML Document Structure

Breakdown of the Example:

Summary of HTML Document Anatomy:

2. Essential HTML Tags: <html>, <head>, and <body>

1. <html> Tag

Purpose of the <html> tag:

Syntax:

Common Attributes:

2. <head> Tag

Purpose of the <head> tag:

Common Elements Inside <head>:

Syntax:

3. <body> Tag

Purpose of the <body> tag:

Common Elements Inside <body>:

Syntax:

How These Tags Work Together:

Explanation:

Summary of Essential Tags:

3. Writing Your First HTML Webpage

Step-by-Step Guide to Writing Your First HTML Webpage

1. Open Your Text Editor

2. Create a New File

3. Write the Basic HTML Structure

4. Understanding the Code:

5. Save and Preview

Customization Ideas

Full Example with Customizations

In this Example:

Next Steps

2. `<html>` Element

3. `<head>` Element

Key Elements in the `<head>`:

4. `<body>` Element

Common Elements Inside `<body>`:

2. Essential HTML Tags: `<html>`, `<head>`, and `<body>`

1. `<html>` Tag

Purpose of the `<html>` tag:

2. `<head>` Tag

Purpose of the `<head>` tag:

Common Elements Inside `<head>`:

3. `<body>` Tag

Purpose of the `<body>` tag:

Common Elements Inside `<body>`: