The front-end of the web is based on three major technologies:

Today, we will build a foundation of HTML knowledge and skills.

HTML is used to create electronic documents (pages) that are displayed on the Web.

HTML ensures the proper formatting of content (text, images, video) so that your browser can display them as intended. As a result, HTML is made up of many elements. These elements are used to hold our content and define how the browser must format and display the content. The term markup refers to the set of tags used to structure a page.

Elements are identified by tags. A tag consists of the element name within angle brackets (< >). A tag starts with an opening tag and ends with a closing tag preceded by </. The tags are referred to as the markup.

Elements which are created with only one tag are called empty elements (also known as self-closing elements) and cannot have any child elements. Examples of this are <img> and <input>.

In HTML, the capitalization of element names is not important. So <img>, <Img>, and <IMG> are all the same. However, most developers prefer the consistency of writing element names in all lowercase.

Block and inline elements

Every HTML element has a default display value. block and inline are the default values for most of the elements.

This is an important distinction:

Most elements are block elements. Some common inline tags you might see used:

What browsers ignore

The following information in the source document will be ignored when it is viewed in a browser:

The purpose of HTML is to add meaning and structure to the content. It is not intended to describe how the content should look.

The minimal structure of an HTML document includes head and body contained within the html root element:

  1. The first line is a document type declaration (also called DOCTYPE) that lets browsers know which HTML specification to use to interpret the document. This DOCTYPE identifies the document as written in HTML5.`
  2. The entire document is contained within an html element. The html element is called the root element because it contains all the elements in the document, and it may not be contained within any other element.
  3. Within the html element, the document is divided into a head and a body. The head element contains elements that pertain to the document that are not rendered as part of the content, such as its title, style sheets, scripts, and metadata.
  4. meta elements provide document metadata, information about the document. In this case, it specifies the character encoding (a standardized collection of letters, numbers, and symbols) used in the document as Unicode version UTF-8.
  5. The title element is required in the head. Every document must contain a descriptive title.
  6. Finally, the body element contains everything that we want to show up in the browser window.

The document structure, the way elements follow each other or nest within one another, creates relationships between elements. The underlying document hierarchy has a technical name is the DOM (Document Object Model). DOM is also the foundation upon which we add presentation instructions with style sheets and behaviors with JavaScript.

Semantic HTML

HTML5 has a variety of semantic tags that provide additional meaning through descriptive naming, available for us to use. They don't provide any visual difference, but they can make our code more understandable and clear to other developers (and our future selves) by organizing content.

Before we had semantic tags like <main>, <section> and more, developers would use <div> tags to organize content. <div>'s are still really useful elements, but we should aim to use more semantic tags for organizing large blocks of your HTML code.

When we want to convey semantic meaning, we can use one the following containing elements: