Skip to main content

HTML

Learning Objectives​

The Frame​

Tags​

HTML is a declarative language. As a declarative language, HTML lacks common computer science paradigms like control flow and functions. Essentially, that means that the HTML you write is exactly the HTML you will see.

You can think of HTML as an outline. First, you outline the sections that you want to see on your website. Then, you fill them with content. HTML will render our document exactly however we tell it to, giving us exact control over what our page looks like. To lay out our website with HTML, we use tags.

Tags are the building blocks of HTML. A tag serves two main purposes:

  1. It gives that section a label, so that both the programmer and the browser can easily refer to it.
  2. It can give the content in that section certain features.

A section is labeled by an opening tag and a closing tag. An opening tag looks like <tag> and a closing tag looks like </tag>. Note that the tag name, "tag" in this case, must be same for the tag to close.

Each type of tag defines specific features for the content inside. For example, plain text is wrapped in a <p></p> tag while links are wrapped in an <a></a> tag, making them clickable.

Nesting​

The power of HTML comes from the fact that you can nest tags. Sections of your document can contain subsections which can contains even more subsections and so on. HTML can be nested arbitrarily, which means there is no technical limit to your nesting. However, we will soon see that there is a practical limit.

The Basics​

To define an HTML document, we start with a <html></html> tag. An HTML document has two main sections: the head and the body. The head mostly contains metadata about the website. The body mostly contains the parts of the document that will be rendered and seen by the user.

We will start with the body, and come back to the head. First we define the body section. Then, inside, we are going to include the text "Hello World!".

Live Editor
Result
Loading...

This text is rendered below. Try changing the text contained in the <p></p> tag. Notice how it changes. The browser is only rendering whatever is inside the tag, not the tag itself.

Now let's revisit the head. The head will contain all the relevant metadata for the website, including links to the CSS and JavaScript files that we will use to style and functionalize our website.

More Tags​

HTML defines a variety of tags that are used for a special purposes.