What Is HTML? A Beginner's Guide to Web Page Structure

How HTML works: elements, tags and attributes

An element usually has an opening tag, some content and a closing tag. Attributes sit inside the opening tag and add extra information, such as where a link points or what an image shows. A few elements, such as <img> and <input>, are void elements and have no closing tag.

<a href="/contact/" class="button">Contact us</a>
<img src="team.jpg" alt="Our team at work" width="800" height="450">

In the first line, a is the element, href and class are attributes, and the text between the tags is the content. The width and height attributes on the image let the browser reserve space before the file downloads, so the layout does not jump as the page loads.

Elements nest inside each other to form a tree. A list contains list items, an article contains headings and paragraphs, and every tag you open inside another must close before its parent closes. The browser turns this tree into the Document Object Model (DOM), which is what CSS selectors match and what JavaScript reads and changes.

A minimal semantic HTML document

Every page starts from the same skeleton. The doctype puts the browser into standards mode, the lang attribute helps screen readers and translation tools, and the viewport meta tag makes the page scale correctly on phones.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fresh Bakes, Pune</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <nav><a href="/">Home</a> <a href="/menu/">Menu</a></nav>
  </header>
  <main>
    <article>
      <h1>Today's breads</h1>
      <p>Baked every morning from local flour.</p>
    </article>
  </main>
  <footer><p>Open 8am to 8pm</p></footer>
</body>
</html>

Notice that the content sits inside elements that describe its role. The <title> appears in the browser tab and in search results, so write a unique one for every page. Everything inside <head> is information about the page, such as its character set, title and linked stylesheets; everything inside <body> is what visitors actually see.

Semantic elements versus generic divs

You can build a page entirely from <div> elements, but then the browser, search engines and assistive technology cannot tell the navigation from the main content. Semantic elements carry meaning without any extra code.

Forms: collecting input from visitors

Forms are how visitors send data to your server, whether it is a search, an enquiry or a sign-up.

<form action="/subscribe" method="post">
  <label for="email">Email address</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Subscribe</button>
</form>

• The for attribute on the label matches the id of the input, so clicking the label focuses the field and screen readers announce it.
• The name attribute is the key the server receives. In PHP this value arrives as an entry in the posted data, as shown in our PHP form handling guide.
• Input types such as email, tel and date give mobile users the right keyboard and basic validation.
• Browser validation is a convenience for the visitor, not a security measure. Always validate again on the server.

Accessibility habits to build from day one

• Write meaningful alt text for informative images and use an empty alt="" for purely decorative ones.
• Use one <h1> per page and keep headings in order, without skipping from h2 to h4 for visual size.
• Make link text describe the destination, such as "View the menu", rather than "click here".
• Check that every interactive element can be reached and used with the Tab and Enter keys alone.

These habits also help search engines understand your pages, because the same structure that a screen reader relies on tells a crawler what the page is about.

How to practise HTML

1. Create a folder with an index.html file and open it in your browser. No server is needed for static HTML.
2. Rebuild a simple page you use often, such as a restaurant menu, using only semantic elements.
3. Run your page through the W3C Markup Validation Service and fix every error it reports.
4. Add styling with CSS layout techniques, then add interaction with JavaScript.

If you prefer a structured path with projects at each stage, SkillNewton's online web development course starts with HTML and builds towards complete database-driven sites.

Common mistakes

• Choosing elements for how they look, such as using a heading tag just to make text bold, instead of for what the content is.
• Leaving out the viewport meta tag, which makes the page render as a shrunken desktop layout on phones.
• Forgetting alt attributes on images, which leaves screen reader users without the information.
• Nesting block elements inside inline ones incorrectly, such as placing a <div> inside a <p>.
• Using placeholder text instead of a proper label, which disappears as soon as the visitor starts typing.

Frequently asked questions