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”.
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 any programming logic.
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 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>
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..
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.
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.
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.
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 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.
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).
Image and Multimedia
These HTML elements represent images, audio, and video.
HTML can embed additional content into a web page, albeit sometimes clumsily.
SVG and MathML
SVG and Mathematical Markup Language (MathML) can be included directly in an HTML document.
The following HTML tags allow us to show areas of content which have been edited or altered.
Tables and tabular data are hugely important for web pages. HTML gives us a large number of elements for structuring tables.
Thanks to HTML forms, users can enter and submit information to a website or application.
HTML has a number of native tags for creating interactive UI elements.
Web components allow you to create and use your own HTML elements, as if they were standard HTML.
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:
Here are some tutorials to help you learn HTML. Subscribe to the Tuts+ YouTube channel for more!