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

As its name tells us, it’s a markup language. Its purpose is to format information; to define meaning and structure in a document. HTML doesn’t have any programming logic.

The word hypertext refers to the links between HTML documents. This linking of information is a core principle behind the World Wide Web, as proposed by Tim Berners Lee in 1989.

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.

<area>
<audio>
<img>

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

<caption>
<col>
<colgroup>
<table>
<tbody>

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

<details>
<dialog>

<summary>

Web Components

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

<slot>

<template>

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!

Post date March 23, 2023

This content originally appeared on Envato Tuts+ Tutorials and was authored by Ian Yates

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

As its name tells us, it’s a markup language. Its purpose is to format information; to define meaning and structure in a document. HTML doesn’t have any programming logic.

The word hypertext refers to the links between HTML documents. This linking of information is a core principle behind the World Wide Web, as proposed by Tim Berners Lee in 1989.

HTML Tags

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