HTML Document Structure

<!DOCTYPE html>
<html lan="en">
    <head>
        <meta charset="UTF-8" />
        <title>Basic Language of the Web</title>
    </head>

    <body>
        <h1>Welcome to HTML</h1>
    </body>
</html>

Headings

There are different sizes of headings in HTML.
These are:
- h1 -> h6(From largest heading h1, to smallest h6).

Comments

We use comments to hide code we don't want rendered in our browser.
We can use comments to explain our code.
Syntax:
- ```
  
```

Elements

Bold - To make text bold, we use the <strong> element. This means the text is important.
```
 <strong>This text is bold</strong>
```
Italic - To make text italic, we use the <em> element. This means we want to emphasize the text.
```
 <em>This text is italic</em>
```

Lists - For ordered lists, we use the <ol> element. For unordered lists, we use the <ul> tag. For items in the list, we use the <li> element meaning list items.

 <ol>
     <li>Shoe</li>
     <li>Hat</li>
     <li>Coat</li>
 </ol>

 <ul>
     <li>Cake</li>
     <li>Orange</li>
     <li>Mango</li>
 </ul>

Images - For embedding an image, we use the element <img>. We include the alt for alternative text to describe the image in case it doesn't load and for convenience to those using screen readers. You can also specify the image width and height.
```
 <img src="img/shoe.jpg" alt="Image of a shoe" width="50" height="50" />
```
Hyperlinks - Point to other pages on our website or outside our website. We use the anchor element <a>. We have to include the href attribute or else it's not a link. To open the link in different ways e.g. new tab, use the target attribute.
```
 <a href="https://w3schools.com" target="_blank">Welcome to w3schools</a>
```
Button - Add a button using the <button> element. Specify the type of button using the type attribute.
```
 <button type="button">Click Me!</button>
```

Structuring our page

We need to group our elements logically.
To do these, we have various elements e.g.
- nav, header, article, footer and aside.

Semantic HTML

We use semantic HTML to give meaning to our elements for search engine optimization(SEO) and accessibility.