lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

webIntroHtmlChapter4Title

lesson12Title

webIntroHtmlChapter1Title

webIntroHtmlChapter2Title

webIntroHtmlChapter3Title

<!DOCTYPE html>
<html lang="en">
  <head>
    
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans"
      rel="stylesheet"
    />

    
    <title>Product Introduction - CompanyName</title>
    <meta
      name="description"
      content="Introduction of the best products provided by CompanyName."
    />
    <meta name="keywords" content="product, CompanyName, features" />
    <meta name="author" content="CompanyName" />
    <link rel="canonical" href="https://yourwebsite.com/product-introduction" />

    
    <meta property="og:title" content="Product Introduction - CompanyName" />
    <meta
      property="og:description"
      content="Introduction of the best products provided by CompanyName."
    />
    <meta
      property="og:image"
      content="https://yourwebsite.com/images/product-thumbnail.jpg"
    />
    <meta
      property="og:url"
      content="https://yourwebsite.com/product-introduction"
    />
    <meta property="og:type" content="website" />

    
    
  </head>

  <body>
    <header>
      <h1>CompanyName Product Introduction</h1>
      <nav>
        
      </nav>
    </header>

    <main>
      <article>
        <h2>Main Features of the Product</h2>
        <p>Describe the main features and information of the product here.</p>
        
      </article>

      <aside>
        
      </aside>
    </main>

    <footer>
      <p>CompanyName © Copyright, Contact Number</p>
    </footer>
  </body>
</html>

# Recap of HTML

HTML, short for "HyperText Markup Language," is a **markup language** used to define the structure and content of a web page.

Web browsers interpret HTML code to display web pages to users.

<br/>

## Basic Structure of a Web Page

```html title="HTML"
<!DOCTYPE html>
<html>
  <head>
    
    <title>Document Title</title>
  </head>
  <body>
    Main content of the web page
  </body>
</html>
```

1. `<!DOCTYPE html>`: Document type declaration. It indicates that the document is written in HTML5.

2. `<html>`: Indicates the beginning and end of an HTML document.

3. `<head>`: Contains metadata, styles, scripts, and other information about the document.

4. `<title>`: Sets the document's title that appears on the browser tab.

5. `<body>`: Contains the actual content of the web page.

<br />

## Some Key HTML Tags:

1. *Heading Tags* : Represent titles and subtitles of the web page.

```html title="Code Example"
<h1>Heading 1</h1>
<h2>Heading 2</h2>
...
<h6>Heading 6</h6>
```

2. *Paragraph Tag* : Creates text paragraphs.

```html title="Code Example"
<p>Text paragraph</p>
```

3. *Link Tag* : Creates hyperlinks to other pages.

```html title="Code Example"
<a href="URL">Link Text</a>
```

4. *Image Tag* : Inserts images into the web page.

```html title="Code Example"
<img src="imageURL" alt="Alternative Text">
```

5. *List Tags* : Creates ordered and unordered lists.

```html title="Code Example"

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
</ol>


<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
```

<br />

You have done a great job learning the fundamentals of HTML, the skeleton of websites 🙌

In the next lesson, we will learn about `CSS`, the clothes of the websites, and how to use it!

In an HTML document, the `<body>` tag contains the actual content of the web page. The `<head>` tag includes meta information, styles, and scripts, while the `<title>` tag sets the title of the document.

Recap of HTML

Basic Structure of a Web Page

Some Key HTML Tags:

Which tag contains the content of the web page in an HTML document?