HTML (Hypertext Markup Language)

HTML is the structural coding language we use to build web pages. Some people refer to HTML as being the “building blocks of the web”.

Hypertext Markup Language Meaning

So what does hypertext markup language actually mean? Its origins stem back further than you might think—the concept of hypertext having been conceived as early as 1941.

As its name tells us, HTML is a markup language. Its purpose is to format information; to define meaning and structure in a document. HTML doesn’t have the kind of logic we associate with JavaScript and PHP, but that’s not say it isn’t a programming language.

The word hypertext in HTML refers to the links between documents. This linking of information is a core principle behind the World Wide Web, as proposed by Tim Berners Lee in 1989. The prefix “hyper” comes from Greek, and means “over” or “beyond”. So hypertext is effectively more than just text.

HTML Tags

HTML uses tags to describe various elements on a page. Usually these consist of an opening <> and a closing tag </> (though sometimes just a single tag is required). The name of the element is placed within these tags (like this: <tag>) conventionally in lowercase. For example:

<h1>These are opening and closing heading tags.</h1> 

<p>These are paragraph tags. The content is kept between them.</p>

<p>The tag underneath is for an `hr` element. It doesn’t require a closing tag.</p>

<hr>

HTML tags are used to describe all kinds of elements: from headings and links, to articles and forms. Browsers use these elements to understand how to render the content, search engines use them to interpret and index web pages, and assistive technologies like screen readers use them to communicate the content properly.

HTML Element Reference

Browse a list of all HTML elements, categorized by function.

This list is updated and added to regularly. More to come..

Main Root

There’s only one tag here; the root element of an HTML document. All other elements within the document must be descendants of this element.

<html>

Document Metadata

We use these HTML elements to contain information about the page. This information might be related to styles, behavior, or data, and it generally helps browsers, search engines, render and process the page properly.

<base>
<head>
<link>

<meta>
<style>
<title>

Sectioning Root

There’s only one element in this category too—the body tag represents all content on a page, and therefore acts as the parent to all other sectioning elements.

<body>

Content Sectioning

Sectioning elements allow us to organize our HTML documents in a logical and understandable way. Sections are descriptive pieces of the whole document, and help us build a structured, semantic document outline.

<h1> - <h6>
<hgroup>
<main>
<nav>
<section>

Text Content

Text is arguably the most important part of a web page. It’s vital for communication, accessibility, and SEO. HTML has a wide variety of text elements to specify the purpose and structure of your textual content.

<blockquote>
<dd>
<div>
<dl>
<dt>
<figcaption>
<figure>

<hr>
<li>
<menu>
<ol>
<p>
<pre>
<ul>

Inline Text

The text content elements (as listed above) contain textual content, but there are a few HTML elements which define the semantic meaning of inline text (words, lines, and other pieces of text).

<a>
<abbr>
<b>
<bdi>
<bdo>
<br>
<cite>
<code>
<data>
<dfn>
<em>
<i>
<kbd>
<mark>
<q>

<rp>
<rt>
<ruby>
<s>
<samp>
<small>
<span>
<strong>
<sub>
<sup>
<time>
<u>
<var>
<wbr>

Image and Multimedia

These HTML elements represent images, audio, and video.

<map>
<track>
<video>

Embedded Content

HTML can embed additional content into a web page, albeit sometimes clumsily.

<embed>
<iframe>
<object>

<picture>
<portal>
<source>

SVG and MathML

SVG and Mathematical Markup Language (MathML) can be included directly in an HTML document.

<math>

<svg>

Scripting

HTML supports scripting languages, like JavaScript, to add dynamic behavior to web pages.

<canvas>
<noscript>

<script>

Demarcating Edits

The following HTML tags allow us to show areas of content which have been edited or altered.

<del>

<ins>

Tables

Tables and tabular data are hugely important for web pages. HTML gives us a large number of elements for structuring tables.

<td>
<tfoot>
<th>
<thead>
<tr>

Forms

Thanks to HTML forms, users can enter and submit information to a website or application.

<button>
<datalist>
<fieldset>
<form>
<input>
<label>
<legend>

<meter>
<optgroup>
<option>
<output>
<progress>
<select>
<textarea>

Interactive Elements

HTML has a number of native tags for creating interactive UI elements.

<summary>

Web Components

Web components allow you to create and use your own HTML elements, as if they were standard HTML.

<slot>

<template>

What is HTML5?

HTML5 was approved way back in 2014 and is the most recent standard for browsers to display and interact with web pages. For context, here’s the timeline of HTML versions accepted by standards committees:

HTML 2.0: 1995
HTML 4.0: 1997
HTML 4.01: 2000
HTML 5: 2014

HTML5 was a big jump from HTML4. It introduced lots of new semantic elements, deprecated others (such as the entirely presentational <big> tag, which made text...a bit bigger), gave us a simpler doctype tag (<!DOCTYPE html>) and reduced the need for third party plugins such as media players. For more information and background, take a look at Jeff’s overview:

What Is HTML5?

Jeff Reifman

29 Sep 2022

FREE

7.9 Hours

HTML & CSS for Beginners

Learn how to code with modern HTML and CSS, the main building blocks of any website. If you want to become a successful web developer, this is where you need to start!

HTML Tutorials

Here are some tutorials to help you learn HTML. Subscribe to the Tuts+ YouTube channel for more!