Lesson 1: Overview

HyperText Markup Language (HTML) is the standard formatting language used to build websites. It structures your content using text, links, images, and other elements.

We nest tags inside other tags to build page structures. We can also add attributes to tags to configure how they work.

Elements#

We wrap content in tags to tell the browser what kind of content it is. An element is the combination of the opening tag, the content, and the closing tag.

Closing tags look exactly like opening tags but start with a forward slash. Nested tags must always close in reverse order.

<p>
  This paragraph has some
  <strong><em>strongly emphasized</em></strong>
  content
</p>

Browsers hide these tags and use them to style and format your text.

While browsers are forgiving and try to auto-close some tags if you forget, you should always close them manually. Unclosed tags can break your layout or styles.

<ul>
  <li>Blendan Smooth</li>
  <li>Hoover Sukhdeep</li>
  <li>Toasty McToastface</li>
</ul>

If you leave a style or script tag unclosed, it will break the entire webpage.

The browser will automatically add some basic wrapping tags if you forget them, but it is always best to write them out yourself.

We have two main types of elements: regular elements that wrap text, and elements that stand alone or pull in outside content (like images).

Normal elements#

Normal elements wrap around text or other tags. These include paragraphs, headings, and lists.

Empty and media elements#

Some elements do not wrap text and have no closing tag. We call these void elements. For example, an image tag stands alone and uses attributes to load a file.

<input type="range" /> <img src="/icon.svg" alt="light switch" />

Void elements include <br> for line breaks, <hr> for dividers, <img> for images, and <input> for forms. You can write them with a trailing slash to make them easier to read, but it is not required.

Some tags pull in outside media but still need a closing tag. For example, <video> and <iframe> require closing tags so you can put fallback text inside them in case the media fails to load.

Attributes#

Attributes are key-value pairs written inside the opening tag to configure the element.

Some attributes work on any element, while others only work on specific tags. Always quote your attribute values so spaces or special characters do not break your code.

<img src="icon.svg" alt="light switch" ismap />

HTML tags and attribute names do not care about capital letters, but custom names like IDs and class names do. We recommend writing all your HTML in lowercase.

Appearance of elements#

Browsers have default styling rules for every tag. For example, they make headings large and bold. But you should choose tags based on what the content is, not how it looks. HTML builds the skeleton of the page, while CSS controls the design.

<h1>
  This header has both <strong>strong</strong> and <em>emphasized</em> content
</h1>

HTML and JavaScript#

Once the browser reads your HTML, it creates a map of your page. You can use JavaScript code later to modify this map to add animations, load new content, or make buttons work. But before you make a page interactive, you need to build its structure with HTML.

Adapted from Learn HTML © Google and contributors, licensed under CC BY 4.0 (prose) and Apache 2.0 (code samples).