> For the complete documentation index, see [llms.txt](https://johndoeknown.gitbook.io/the-html-book/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://johndoeknown.gitbook.io/the-html-book/master.md).

# The HTML Book

## What is HTML?

HTML or Hyper Text Markup Language defines the structure of the content in a Webpage, for example, structuring Text or Images. This is done using tags `<>` . Each tag serves a different purpose.&#x20;

Since, HTML is a markup language, we can't either style the content or add logic to our webpage. We use CSS (Cascading Style Sheets) and JavaScript for styling and adding logic.

### What's the matter with tags?

The below code snippet is the code for a post.

{% code title="post\_example.html" %}

```markup
<h1>Keyboards.....</h1>
<img src="post-banner.jpg" alt="A keyboard picture as the post banner">
<p>I like keyboards</p>
```

{% endcode %}

On first line we have `<h1>Keyboards...</h1>` which means we're using `<h1>` element and specifying the `Keyboards...` as the child to it. `h1` element is typically used for headings, and whatever you specify in between the enclosing tags is the content for it. So we'd have a heading with the title `Keyboards...` .&#x20;

Elements like `h1` has a starting tag with `<h1>` and ends with `</h1>` .  Some elements don't need an ending tag. There are six sizes in heading, and `h1` is the largest and `h6` is the smallest. The order is `h1 > h2 > h3 > h4 > h5 > h6` .

So, from what we've learned with `h1` same goes with `p` tag too. The `p` tag is used for paragraph style content and the stuff inside it is the content.

An HTML element can also have other HTML elements as children too. The below is the code snippet for an ordered list `ol` with 2 list elements `li` as it's children.&#x20;

{% code title="list\_example.html" %}

```markup
<ol>
    <li>one</li>
    <li>two</li>
</ol>
```

{% endcode %}

So, we learned that an HTML element can have text or other HTML elements as it's children. We can't use this concept to add media related content to our webpage.

### How to add media content?

Other children, an HTML element can also attributes. We use these attributes to customize the behavior of an element. In our `post_example.html`, we used the image tag `img` to have an image in our webpage, use the `src` attribute to specify the path the image, and voila. The `alt` attribute is used to specify an alternate text when the image is unavailable due to network failure or wrong path. The alternate text is also used by screen readers to interpret the image which ensures accessibility.

Note that `img` tag doesn't have an ending tag because it doesn't need any children. Elements like `img` are called self enclosing elements.

## Summary

//TODO

There are a lot of elements in HTML, but we only need a few basic elements. In coming chapters, we look at their meaning, where they are used, what attributes do they have etc.

### Sources

* <https://developer.mozilla.org/en-US/docs/Web/HTML>