W3docs
en
Log in

HTML Basic Tags

Learn the basic HTML tags every page needs: headings, paragraphs, images, links, buttons, lists and horizontal rules, with runnable examples.

HTML is a markup language: you wrap your content in tags (elements) that tell the browser what each piece of content means — this is a heading, that is a paragraph, this is a link. Without markup, a browser would just see a wall of text with no structure. Understanding the basic tags is the foundation for everything else in HTML.

Here are the elements you will use most often on almost every page:

This page introduces each of them, explains why you need them, and gives a runnable example you can edit.

HTML documents

Every HTML page shares the same boilerplate skeleton. The pieces below appear in all the examples on this page, so it is worth knowing what each one does:

  • <!DOCTYPE html> must be the very first line. It is not a tag but a declaration that tells the browser to use modern (HTML5) standards mode. If you omit it, browsers fall back to an old "quirks mode" that renders pages inconsistently.
  • The whole document is wrapped in the <html> element: it begins with <html> and ends with </html>. This is the root element.
  • The <head> section holds information about the page that is not shown in the page body — for example, the <title>, which sets the text shown in the browser tab and used by search engines.
  • The visible content of the page lives between <body> and </body>. Everything the user sees — headings, paragraphs, images, links — goes here.

Example of an HTML document:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <p>Here is the paragraph.</p>
  </body>
</html>
Try it Yourself »

HTML headings

Headings give a page its outline. There are six levels of HTML headings, from <h1> (most important) down to <h6> (least important). Use <h1> for the main title of the page, <h2> for major sections, <h3> for sub-sections, and so on — like a table of contents.

Headings are not just bigger, bolder text. Their levels carry meaning that matters for accessibility and SEO: screen-reader users navigate a page by jumping between headings, and search engines use the heading structure to understand what the page is about. For that reason, choose a heading level for its meaning, not for its size — never skip levels just to make text look smaller.

Example of the HTML headings:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6>
  </body>
</html>
Try it Yourself »

HTML paragraphs

The <p> element groups your text into paragraphs. Browsers add space above and below each paragraph automatically, so you don't have to add blank lines yourself — in fact, extra spaces and line breaks in your source code are collapsed into a single space. Wrapping text in <p> is how you tell the browser "this is one block of running text."

Example of the HTML paragraphs:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Elements example</h2>
    <p>This is some paragraph.</p>
    <p>This is another paragraph <br /> with line break.</p>
  </body>
</html>
Try it Yourself »

HTML images

The <img> tag embeds an image into the page. It is an empty element (no closing tag), and it is controlled entirely by its attributes:

  • src — the path or URL of the image file to display. Without it, nothing shows.
  • alt — the alternative text (see below).
  • width / height — the size of the image in pixels. Setting them reserves space so the layout doesn't jump while the image loads.

Why the alt attribute matters

The alt attribute holds a short text description of the image. It is required because it serves several important purposes:

  • Screen readers read the alt text aloud, so people who cannot see the image still understand it — this is essential for accessibility.
  • If the image fails to load, the browser shows the alt text in its place.
  • Search engines use it to understand what the image depicts.

Good alt text describes the content or purpose of the image in a few words, as if you were describing it to someone over the phone. For example, instead of alt="Aleq" (which is meaningless to anyone who doesn't already know what "Aleq" is), prefer something like alt="Portrait of a smiling man wearing glasses". If an image is purely decorative and adds no information, use an empty alt="" so screen readers skip it.

Example of the HTML images:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is an image example</h1>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185">
  </body>
</html>
Try it Yourself »

Links are what turn separate pages into a connected web — they let users click from one page to another. You create a link with the <a> (anchor) tag and wrap it around the text or image that should be clickable.

The destination is set with the href attribute (short for hypertext reference). It is the address the browser navigates to when the link is clicked — an absolute URL like https://www.w3docs.com/, or a path on your own site like /learn-html/html-links. Without an href, an <a> element is just text and does nothing.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a href="https://www.w3docs.com/">W3docs.com</a>
  </body>
</html>
Try it Yourself »

HTML buttons

The <button> tag creates a clickable button that users can press to trigger an action — submitting a form, opening a menu, or running some JavaScript.

A button has a type attribute. Setting type="button" is a good habit when the button is not meant to submit a form: by default, a <button> inside a <form> has type="submit", so leaving the type out can cause the form to submit (and the page to reload) unexpectedly. Using type="button" makes the button do nothing on its own until you attach behavior to it, which prevents that accidental submission.

Example of the HTML <button> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Example of the HTML &lt;button&gt; tag:</h1>
    <p>You can specify the HTML buttons with the button tag:</p>
    <button type="button">Button</button>
  </body>
</html>
Try it Yourself »

HTML lists

Lists group related items together. Use the <ul> tag for an unordered list (bulleted items, where order does not matter) or the <ol> tag for an ordered list (numbered items, where sequence matters, such as steps in a recipe). Inside either one, each item is wrapped in an <li> (list item) tag.

Example of the HTML lists:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>An unordered list</h2>
    <ul>
      <li>Pen</li>
      <li>Pencil</li>
      <li>Ruler</li>
      <li>Book</li>
    </ul>
    <h2>An ordered list</h2>
    <ol>
      <li>Pen</li>
      <li>Pencil</li>
      <li>Ruler</li>
      <li>Book</li>
    </ol>
  </body>
</html>
Try it Yourself »

HTML horizontal lines

The HTML <hr> tag represents a thematic break between paragraph-level content — for example, a shift to a new topic within a section, or a scene change in a story. In HTML5 it is a semantic element, not just a decorative line: it communicates that the content before and after it are about different things. Browsers usually render it as a horizontal line, but that is only its default appearance. It is an empty tag, so it has no closing tag.

Example of the HTML <hr> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Welcome to W3Docs</h1>
    <hr />
    <p>
      Learn to design and build professional website<br />
      Learn to design and build professional website
    </p>
    <p>Learn to design and build a professional website</p>
    <hr />
    <p>Learn to design and build professional website</p>
    <p>Learn to design and build professional website</p>
    <p>Learn to design and build professional website</p>
    <hr />
  </body>
</html>
Try it Yourself »

Practice

Practice
Which statements about the basic HTML elements are true?
Which statements about the basic HTML elements are true?

Summary

The basic HTML tags introduced here are the building blocks of nearly every web page:

Was this page helpful?