HTML structure: elements, tags, attributes, headings, links and images

Every web page you have ever read, from a school notice to an online shop, is a text file written in HTML. Your browser reads that file and turns it into the page you see. Learning HTML shows you what a page is really made of, and it is the first step to making your own page, however small. You need no special software: a text editor, or the live editor in this lesson, is enough.

What HTML is

HTML stands for HyperText Markup Language. A markup language is plain text with labels added to say what each piece of text is: this is a heading, this is a paragraph, this is a link. HTML does not decide colours or fonts. It describes the structure and meaning of the page. Appearance is the job of CSS, which you meet in the next module.

Think of a school exercise book. A title at the top, a numbered list of questions and a note in the margin all have different roles, even before anyone chooses a pen colour. HTML marks those roles. When your Browser downloads a file such as index.html from a Web server, it reads the labels and draws the page.

Elements, tags and attributes

The building block of HTML is the element. Most elements have an opening tag, some content and a closing tag. A tag is a word inside angle brackets: <p> opens a paragraph and </p> closes it. The slash in the closing tag is what makes it a closing tag. Together, the opening tag, content and closing tag make one element.

Some tags carry extra information called attributes. An attribute sits inside the opening tag as a name, an equals sign and a value in quotation marks. In the link below, href is the attribute name and the web address is its value. The text between the tags, "Visit the example site", is what the reader sees and clicks.

The skeleton of every page

Every HTML page has the same outer shape. The first line, <!doctype html>, tells the browser to treat the file as modern HTML. The <html> element wraps everything and lang="en" states the language, which helps screen readers pronounce the words correctly. Inside, <head> holds information about the page that is not drawn in the main area, and <body> holds everything the reader sees.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Amina's Garden Club</title>
  </head>
  <body>
    <h1>Welcome to the garden club</h1>
    <p>We meet every Saturday morning to grow vegetables together.</p>
  </body>
</html>

Line by line: <meta charset="utf-8"> says which character set the file uses, so letters with accents and symbols display correctly. The viewport line makes pages behave sensibly on phones (you will use it again in the responsive design lesson). The <title> text appears on the browser tab and in search results. The indentation is only for people; the browser ignores it.

Headings, paragraphs, links, images and lists

Headings run from <h1> (the most important) down to <h6>. Use one <h1> per page for the main title, then <h2> for sections and <h3> for parts of sections. Choose headings by their level in the outline, not by how large they look; size is changed later with CSS. Paragraphs use <p>. Browsers ignore extra spaces and blank lines in your file, so two paragraphs need two <p> elements.

A link uses the <a> (anchor) element with an href attribute. An address starting with https:// goes to another site. A name such as about.html goes to another file in the same folder. An image uses <img>, which is a void element: it has no content and no closing tag. Its src attribute says which file to show, and its alt attribute holds a short text description for people who cannot see the picture.

<h1>Garden club</h1>
<h2>This month</h2>
<p>Read the <a href="https://example.org/seeds">seed guide</a> before Saturday.</p>

<img src="tomatoes.jpg" alt="Ripe red tomatoes growing on a vine" width="300">

<h2>What to bring</h2>
<ul>
  <li>Gloves</li>
  <li>A water bottle</li>
</ul>

<h2>Our routine</h2>
<ol>
  <li>Dig the beds</li>
  <li>Plant the seedlings</li>
  <li>Water them</li>
</ol>

<ul> makes an unordered (bulleted) list and <ol> makes an ordered (numbered) list. Each item is an <li> inside the list. Notice the nesting: <li> elements live inside <ul>, so they are closed before the </ul>. If tomatoes.jpg is not in the same folder as your page, the image will show as a broken picture, because src is a file path just like the ones you learned in the files module.

Try it in the live editor

The best way to learn HTML is to change it and watch what happens. The editor below runs entirely in your browser. It shows a safe preview and cannot change any file on your computer. Nothing you type is sent anywhere.