What is HTML? A Complete Introduction for Beginners

Beginner 9 min read

What you'll learn

✓What HTML is and what role it plays on the web
✓How a browser turns HTML text into a visible page
✓The anatomy of an HTML element and document
✓How HTML relates to CSS and JavaScript
✓How to write and open your first HTML file

Prerequisites

None — this post is self-contained.

HTML is the language every website is built with. Open any page on the internet, view its source, and you will see HTML. It is the foundation on top of which CSS adds style and JavaScript adds behavior. This guide explains what HTML actually is, how the browser uses it, and how to write a working page from scratch.

No prior experience is required.

What is HTML?

HTML stands for HyperText Markup Language. It is not a programming language in the traditional sense — it does not have variables, loops, or conditionals. It is a markup language, which means its job is to describe the structure and meaning of content using a system of tags.

A minimal HTML document looks like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is my first HTML page.</p>
  </body>
</html>

Save that text in a file named index.html, double-click it, and your browser will render a page with a large heading and a paragraph below it. That is the entire workflow — there is no install step, no compiler, no build process.

The language was created in 1991 by Tim Berners-Lee at CERN as the document format for a new system he called the World Wide Web. The version every modern browser supports today is HTML5, finalized in 2014 and continuously evolved since.

How the browser reads HTML

When you open an HTML file, the browser does three things, in order:

Parse the text into a tree of elements called the DOM (Document Object Model).
Apply styles from any CSS it finds, in the file or linked externally.
Render the styled tree to pixels on screen.

You do not have to think about this process to write HTML, but it is useful to know that the document is a tree — every element has a parent and may have children. That tree is what CSS targets and what JavaScript manipulates.

The anatomy of an element

Almost every piece of HTML follows the same pattern:

<p class="intro">Welcome to the site.</p>

The pieces are:

<p> — the opening tag. It tells the browser, “a paragraph starts here.”
class="intro" — an attribute. Attributes carry extra information about the element.
Welcome to the site. — the content.
</p> — the closing tag.

Together, the opening tag, content, and closing tag form an element. The tag name (p here) determines what kind of element it is — a paragraph, a heading, a link, an image, and so on.

A few elements have no content and therefore no closing tag. These are called void elements:

<img src="cat.jpg" alt="A sleeping cat" />
<br />
<hr />

The trailing slash is optional in HTML5, but many developers keep it for readability.

The shape of a document

Every HTML page has the same broad shape:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- metadata about the page -->
  </head>
  <body>
    <!-- what the user actually sees -->
  </body>
</html>

<!DOCTYPE html> tells the browser, “use modern HTML rules.” It must be the first line.
<html> is the root element. The lang attribute helps screen readers and search engines.
<head> contains metadata — the page title, character set, links to stylesheets, and so on. Nothing inside <head> is rendered directly.
<body> contains everything the user sees.

You will write this same skeleton at the start of every page for the rest of your career. Memorize it.

HTML, CSS, and JavaScript

The web has three core languages, each with a single clear job.

HTML describes the structure and meaning of content. “This is a heading. That is a paragraph. Here is a list.”
CSS describes the presentation. “Headings are blue. Paragraphs use a serif font. The list has spacing between items.”
JavaScript describes the behavior. “When the user clicks this button, fetch new data and update the page.”

A useful analogy: HTML is the skeleton, CSS is the skin and clothes, JavaScript is the muscles. You can survive on the skeleton alone — a plain HTML page works — but real sites combine all three.

A more realistic example

Here is a small but complete page using common HTML5 elements:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Ada Lovelace</title>
  </head>
  <body>
    <header>
      <h1>Ada Lovelace</h1>
      <p>Mathematician, 1815–1852</p>
    </header>

    <main>
      <h2>Why she matters</h2>
      <p>
        Ada wrote what is widely considered the
        <strong>first computer program</strong>, an algorithm for
        Charles Babbage's Analytical Engine.
      </p>

      <h2>Selected works</h2>
      <ul>
        <li>Notes on the Analytical Engine (1843)</li>
        <li>Translation of Menabrea's memoir</li>
      </ul>
    </main>

    <footer>
      <p>Page written for practice.</p>
    </footer>
  </body>
</html>

Read it slowly. Every element describes the role of its content: a header, a main section, a footer, headings, paragraphs, a list. This is what people mean when they say “semantic HTML” — the tags carry meaning, not just appearance.

Try it yourself. Copy the example above into a file called ada.html on your desktop. Double-click the file. Your browser will open it. Now change the name, the dates, and the list items to describe a person you admire. Save and refresh.

Attributes you will use constantly

A handful of attributes appear on almost every element:

id — a unique identifier for one element. Used by CSS, JavaScript, and in-page links.
class — a label that can appear on many elements. Used by CSS to apply shared styles.
href — on <a> tags, the URL the link points to.
src — on <img>, <script>, <iframe>, the file to load.
alt — on <img>, a text description for screen readers and broken-image fallback.

A link and an image together:

<a href="https://example.com">
  <img src="logo.png" alt="Example logo" />
</a>

That snippet — an image wrapped in an anchor — is one of the oldest patterns on the web and still common today.

Why HTML matters beyond looks

It is tempting to think of HTML as “the boring part” you rush through to get to the CSS. That is a mistake. Well-structured HTML gives you:

Accessibility. Screen readers rely on tags like <nav>, <main>, and <h1> to help users navigate.
SEO. Search engines read your HTML to understand what the page is about.
Maintainability. A page built from <header>, <article>, and <footer> is easier to read six months later than a soup of <div> tags.
Free behavior. A <button> is keyboard-accessible by default. A <div> styled to look like a button is not.

Spending an extra minute choosing the right tag pays back for years.

Try it yourself. Open any website you use daily, right-click, and choose “View Page Source.” Skim the first thirty lines. You will see the same <!DOCTYPE html>, <head>, <title>, and <body> you just learned about — running real production sites.

What you need to get started

A computer running Windows, macOS, or Linux.
A modern browser — Chrome, Firefox, Edge, or Safari.
A code editor — Visual Studio Code is free and excellent.

You do not need a web server, a domain name, or any paid tools to learn HTML. A .html file on your desktop is a complete development environment.

A realistic learning timeline

Comfortable writing static pages: one to two weeks of casual practice.
Comfortable structuring real-world layouts: another two to three weeks once you add CSS.
Confident with semantic, accessible HTML: two to three months of building small projects.

The best way to learn is to build small things end-to-end — a personal homepage, a recipe page, a resume. Reading alone does not stick.

Recap

You now know:

HTML is a markup language that describes the structure of web content
Every page has the same skeleton: <!DOCTYPE html>, <html>, <head>, <body>
An element is an opening tag, content, and closing tag — plus optional attributes
HTML, CSS, and JavaScript handle structure, presentation, and behavior respectively
Semantic tags like <header>, <main>, and <footer> improve accessibility and SEO
You can write and view HTML with nothing more than a text editor and a browser

Next steps

The next post takes a tour of the HTML tags you will reach for every single day — headings, paragraphs, links, lists, images, and the layout containers that hold them together.

→ Next: Essential HTML Tags Every Developer Should Know

Questions or feedback? Email codeloomdevv@gmail.com.