HTML (HyperText Markup Language): Uses, Syntax, Example

HTML (HyperText Markup Language) is the standard markup language for web pages. It uses tags such as <h1>, <p>, <a> and <img> to label each piece of content as a heading, paragraph, link or image, and the browser reads those labels to build the page. HTML is a markup language, not a programming language: it describes the structure and meaning of content but has no variables, conditions or loops. Styling is left to CSS and behaviour to JavaScript.

“HyperText” means text containing links to other documents, which is what makes the web a web. “Markup” means annotations added around the content to say what each part is. Today HTML is maintained as the HTML Living Standard by the WHATWG, a group founded by browser makers, and it is updated continuously instead of in numbered versions.

HyperText Markup Language example: a complete page

This is a minimal but complete, valid HTML document. Save it as index.html and open it in any browser.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, HTML</h1>
  <p>This is a paragraph with a <a href="https://example.com">link</a>.</p>
  <img src="photo.jpg" alt="A red bicycle leaning on a wall">
</body>
</html>

Line	What it does
`<!DOCTYPE html>`	Tells the browser this is a modern HTML document, so it renders in standards mode. It is a declaration, not a tag.
`<html lang="en">`	The root element that wraps everything. `lang` tells screen readers and search engines the page language.
`<head>`	Information about the page that is not shown in the page body.
`<meta charset="utf-8">`	Sets the character encoding so letters in any language, including Hindi, display correctly.
`<meta name="viewport" ...>`	Makes the page fit the width of a mobile screen instead of showing a zoomed-out desktop view.
`<title>`	Text shown on the browser tab and as the headline in search results.
`<body>`	Everything the visitor sees.
`<h1>`	The main heading of the page.
`<p>` and `<a href>`	A paragraph containing a hyperlink; `href` is the link target.
`<img src alt>`	An image; `src` is the file and `alt` is the text alternative for people who cannot see it.

HTML markup: elements, tags and attributes

Three words describe all HTML markup:

A tag is the label in angle brackets: <p> opens, </p> closes.
An element is the opening tag, the content and the closing tag together: <p>Hello</p> is one paragraph element.
An attribute adds information to an element, written inside the opening tag as name="value", as in <a href="page.html">.

Some elements are void elements with no content and no closing tag, such as <img>, <br>, <hr>, <meta> and <input>. Elements can be nested inside one another, and must close in the reverse order they opened: <p><strong>bold</strong></p>, not <p><strong>bold</p></strong>. Tag names are not case-sensitive, but lowercase is the convention.

The HTML tags beginners actually need

Group	Tags	Used for
Document structure	`html, head, title, meta, link, body`	The skeleton every page has
Text	`h1` to `h6`, `p, strong, em, br, blockquote, code, pre`	Headings, paragraphs, emphasis, quotes, code
Links	`a`	Links to other pages, files, email (`mailto:`) or a section of the same page (`#id`)
Media	`img, video, audio, picture`	Images and media, with `alt` text or captions
Lists	`ul, ol, li`	Bulleted and numbered lists
Tables	`table, thead, tbody, tr, th, td`	Tabular data only, not page layout
Forms	`form, label, input, textarea, select, button`	Collecting user input such as login or search
Semantic sections	`header, nav, main, article, section, aside, footer`	Marking the role of each part of the page
Generic containers	`div, span`	Grouping content for styling when no semantic tag fits

A small form, with each input tied to its label:

<form action="/search" method="get">
  <label for="q">Search</label>
  <input type="text" id="q" name="q" required>
  <button type="submit">Go</button>
</form>

The required attribute makes the browser refuse to submit an empty box, with no JavaScript. Input types such as email, number and date give built-in checks and the right keyboard on phones.

Semantic HTML and accessibility

Semantic HTML means choosing the element that describes what the content is, not how it should look. A navigation menu goes in <nav>, the main content in <main>, a blog post in <article>. It matters because screen readers, search engines and browser reader modes all rely on these labels.

Alt text: every meaningful <img> needs an alt that says what the image shows. Decorative images get an empty alt="" so screen readers skip them.
Headings in order: normally one <h1> per page, then <h2> for sections and <h3> inside them. Do not pick a heading level for its font size.
Labels on form fields: connect each <label> to its input with for and id, so clicking the label focuses the field and screen readers announce it.
Real buttons and links: use <button> for actions and <a> for navigation, not a clickable <div>, so keyboard users can reach them.
Language: set lang on the <html> element.

A short history of HTML

Year	Milestone
1991	Tim Berners-Lee, at CERN, publishes “HTML Tags”, describing the first set of HTML tags
1995	HTML 2.0 published by the IETF as RFC 1866, the first formal standard
1997	HTML 3.2 becomes a W3C Recommendation
1999	HTML 4.01 becomes a W3C Recommendation
2004	Apple, Mozilla and Opera form the WHATWG to develop HTML further
2014	HTML5 becomes a W3C Recommendation (28 October), adding semantic elements, native audio and video, canvas and new form inputs
2019	W3C and WHATWG sign an agreement (May): HTML is developed as a single WHATWG Living Standard and W3C stops publishing its own separate HTML specification

So “HTML5” is still a common name, but there is no HTML6 coming. The Living Standard is simply updated as browsers add features.

Uses of HTML

Web pages and websites: every page a browser shows, from a college notice board to an online shop, is HTML at its core.
Web applications: apps like webmail and online editors are HTML pages whose content is changed by JavaScript.
Email: formatted newsletters and receipts are written in HTML.
Documentation and help pages: software manuals, and output from tools that export reports as HTML.
Hybrid mobile and desktop apps: frameworks that package HTML, CSS and JavaScript as installable apps.
Search and sharing: the title, headings and meta tags in HTML are what search engines and social previews read.

How HTML, CSS and JavaScript divide the work

Language	Job	Example
HTML	Structure and meaning	“This is a heading, this is a list, this is a button”
CSS	Presentation	Colours, fonts, spacing, layout, how it looks on a phone
JavaScript	Behaviour	What happens when the button is clicked; loading new data

Keep them separate: structure in the .html file, styles in a linked .css file and scripts in a .js file. For the three ways to attach styles to a page, see types of CSS. When the browser requests a page, it arrives over HTTP, which is covered under the application layer.

Benefits and limitations of HTML

Benefits	Limitations
Free, open standard; no licence or special software, a text editor is enough	Cannot do logic or calculations on its own; needs JavaScript or a server language
Supported by every browser on every device	Static by itself: content does not update without scripts or a server
Easy to learn; a beginner can build a page in an hour	Appearance needs CSS; plain HTML looks bare
Browsers are forgiving: small errors rarely break the page	That forgiveness hides mistakes; validate your markup to catch them
Semantic tags help search engines and accessibility	Large sites repeat a lot of markup, so templates or frameworks are used

Student tip: check your pages with the free W3C Markup Validation Service. It catches unclosed tags and missing alt attributes that the browser silently ignores.

FAQs

What is HyperText Markup Language?

HyperText Markup Language (HTML) is the standard language for creating web pages. It marks up content with tags that tell the browser what each part is, such as a heading, paragraph, link, image, list, table or form.

Is HTML a programming language?

No. HTML is a markup language. It describes the structure of content but has no variables, conditions, loops or functions. Logic on a web page is written in JavaScript, or in a server-side language.

What is an example of HTML?

The simplest example is a link: an a element whose href attribute holds the web address, with the clickable text placed between the opening and closing a tags. A full page wraps content like this in the doctype, html, head and body elements, as in the example page above.

What are the main uses of HTML?

Building web pages and websites, structuring web applications, formatting emails, writing documentation, and supplying the titles, headings and meta tags that search engines read.

What is the latest version of HTML?

There is no numbered latest version any more. Since 2019, HTML has been developed as the HTML Living Standard by the WHATWG, with W3C’s agreement, and is updated continuously. HTML5 is the name still used for the modern language.

HyperText Markup Language (HTML): What It Is, Syntax, Example and Uses