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:
1 |
<h1>These are opening and closing heading tags.</h1> |
2 |
|
3 |
<p>These are paragraph tags. The content is kept between them.</p> |
4 |
|
5 |
<p>The tag underneath is for an `hr` element. It doesn’t require a closing tag.</p> |
6 |
|
7 |
<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.
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.



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.



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.



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.



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.



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



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



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



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.



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:
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!
- Your First HTML Document in 60 SecondsKezz Bracey02 Dec 2015
- How to Build an HTML Accordion (No CSS or JavaScript!)Jemima Abu29 May 2023
- 2 Ways to Protect Your HTML Email Links (and Prevent SPAM)George Martsoukos09 May 2022
- Creating a Simple Responsive HTML EmailNicole Merlin25 Oct 2021
- How to Hand Code SVGKezz Bracey21 Apr 2023
- How to Use ARIA Roles, Properties, and States in HTMLKingsley Silas Chijioke17 Nov 2020
- The Importance of Heading Levels for Assistive TechnologyEric Bailey22 Oct 2018
- How to Check and Generate Meta Tags for Your WebsiteAdi Purdila06 Mar 2018
- How to Use HTML5 “picture”, “srcset”, and “sizes” for Responsive ImagesKezz Bracey27 Jun 2023