The HTML Book

A quick yet detailed start to HTML

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.

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.

post_example.html

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

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... .

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.

list_example.html

<ol>
    <li>one</li>
    <li>two</li>
</ol>

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