HTML Basics

HTML (HyperText Markup Language) is the standard language for structuring web pages. It uses elements, made of tags, to describe what content is: a heading, a paragraph, a link, an image. Browsers read that structure and render the page.

Document structure

Every HTML page follows the same basic shape:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Page Title</title>
  </head>
  <body>
    Content goes here
  </body>
</html>
  • <!DOCTYPE html> tells the browser to render the page in standards mode, using the current HTML rules. Every page should start with this, exactly as written.
  • <html lang="en"> is the root element. The lang attribute tells screen readers and translation tools what language the page is in.
  • <head> holds information about the page: the title, character encoding, and links to CSS files. Nothing in <head> is visible on the page itself.
  • <title> sets the text shown in the browser tab and in search results. It isn’t visible on the page.
  • <body> holds everything that is actually visible to visitors.

Elements, tags, and attributes

An element usually has an opening tag, some content, and a closing tag:

<p>This is a paragraph.</p>
  • <p> is the opening tag.
  • This is a paragraph. is the content.
  • </p> is the closing tag.

Some elements don’t wrap content and don’t need a closing tag. These are called void elements:

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

Attributes add extra information to a tag. They go inside the opening tag as name="value" pairs:

<a href="/about" class="nav-link">About</a>

Here, href and class are attributes on the <a> element. Attributes are for information HTML needs to do its job (a link’s destination, an image’s source), not for styling. Save colours, spacing, and fonts for CSS.

<!-- Avoid: style is a presentational attribute -->
<p style="color: red;">Careful!</p>

<!-- Better: use a class and style it in CSS -->
<p class="warning">Careful!</p>

Nesting

Elements can contain other elements. When they do, close the inner element before closing the outer one:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
</ul>

Mismatched or unclosed tags are one of the most common HTML bugs. Most browsers will try to guess what you meant and still render something, but the result can be unpredictable, especially with CSS and JavaScript relying on that structure. Keep tags properly nested and closed.

Comments

Comments are notes for developers. Browsers don’t render them.

<!-- TODO: replace with real testimonials before launch -->

Use comments to explain why something is there when it isn’t obvious, not to describe what the tag already says.

Coding tips

  • Use consistent indentation (two spaces is common) so nesting is easy to follow at a glance.
  • One attribute value per set of quotes, always quoted: class="card", not class=card.
  • Keep line length reasonable so code is easy to scan and review.

File naming and organization

  • HTML files use the .html extension, for example about.html.
  • A site’s homepage should be named index.html. Servers look for this file by default when someone visits a folder or domain.
  • index.html for the homepage must live in the root folder, not a subfolder.
  • Use lowercase file names with hyphens instead of spaces: about-us.html, not About Us.html.
  • Group images and other assets into their own folders (/images, /css, /js) to keep the project organised.

FAQ

Do I need to close every tag?

Yes, for elements that wrap content (<p>, <div>, <li>, and so on). Void elements like <img>, <br>, and <hr> never wrap content, so they don’t get a closing tag.

Does HTML care about indentation?

No, browsers ignore whitespace between tags. Indentation is purely for humans reading the code, but it makes a real difference when you’re debugging nested structure.