Introduction
HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create and structure content on the World Wide Web. According to Mozilla Developer Network, it defines the meaning and structure of web content using a system of elements, which are represented by tags. These tags label pieces of content such as headings, paragraphs, and tables. Browsers do not display the HTML tags but use them to interpret and render the content of the page.
History
HTML was created by physicist Tim Berners-Lee in 1990 while he was working at CERN, the European Organization for Nuclear Research. The first publicly available description of HTML was a document called "HTML Tags," first mentioned on the internet by Berners-Lee in late 1991, as documented by the World Wide Web Consortium (W3C). It was originally conceived as a simple way to share and structure scientific documents.
The Internet Engineering Task Force (IETF) formally defined HTML as a standard with the publication of HTML 2.0 in 1995. The W3C became the primary body for HTML standardization, releasing HTML 4.0 in 1997 and a revised HTML 4.01 in 1999. A parallel development, XHTML, was an XML-based reformulation of HTML 4.01 that imposed stricter syntax rules.
In 2004, a schism in the web development community led to the formation of the Web Hypertext Application Technology Working Group (WHATWG) by individuals from Apple, Mozilla, and Opera. As detailed by WHATWG, this group began work on what would become HTML5, focusing on supporting modern web applications while maintaining backward compatibility. The W3C and WHATWG collaborated for several years, but their development models eventually diverged. Since 2019, the WHATWG's HTML Living Standard is considered the definitive, continuously updated standard for HTML, with the W3C publishing periodic recommendations based on it.
Structure and Syntax
An HTML document is a plain text file composed of elements. Each element is typically made up of a start tag (e.g., <p>
), content, and an end tag (e.g., </p>
). Some elements, known as empty or void elements, do not have content or an end tag, such as the image element (<img>
).
A basic HTML document has a fundamental structure. According to the HTML Living Standard, it begins with a document type declaration,
<!DOCTYPE html>
, which specifies that the document is an HTML5 document. The rest of the document is enclosed within an <html>
element. Inside the <html>
element are two main sections: the <head>
and the <body>
.
- –
<head>
: Contains meta-information about the document, such as its title (using the<title>
element), links to stylesheets, and character set declarations. This information is not typically displayed on the page itself. - –
<body>
: Contains all the visible content of the web page, including headings (<h1>
through<h6>
), paragraphs (<p>
), images (<img>
), links (<a>
), lists (<ul>
,<ol>
), and other structural elements.
Elements can also contain attributes, which provide additional information. For example, the <a>
element uses the href
attribute to specify the URL of the link's destination. The <img>
element uses the src
attribute to define the source of the image file. The introduction of semantic HTML in HTML5 encouraged developers to use tags that describe the content's meaning, such as <article>
, <section>
, and <nav>
, which improves accessibility and Search Engine Optimization (SEO).
Relationship with Other Technologies
HTML serves as the structural foundation of a web page but is almost always used in conjunction with two other core technologies:
- –Cascading Style Sheets (CSS): As explained by
freeCodeCamp, CSS is a stylesheet language used to control the presentation, formatting, and layout of the content structured by HTML. It handles colors, fonts, spacing, and responsive design for different devices.
- –JavaScript: A programming language that enables interactive and dynamic behavior on web pages. It can manipulate the HTML and CSS of a page through the Document Object Model (DOM), a programming interface for the page's structure. JavaScript is used for tasks like validating forms, creating animations, and fetching data from servers without reloading the page.