HT HTML

HTML: Elements & Page Structure

What you will learn

The basic building blocks of every HTML page: tags, elements, the document structure (head and body), and the difference between block and inline elements.

The minimal HTML page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Page</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

The two main sections

Section Purpose Common tags
<head> Metadata for the browser (not displayed) <title>, <meta>, <link>, <style>, <script>
<body> Visible page content <h1>-<h6>, <p>, <div>, <img>, <a>, <ul>

Common content tags

Tag Purpose Example
<h1> to <h6> Headings (h1 = most important) <h1>Title</h1>
<p> Paragraph <p>Some text...</p>
<a> Hyperlink <a href="url">click</a>
<img> Image <img src="photo.jpg" alt="desc">
<ul> / <ol> Unordered / ordered list <ul><li>Item</li></ul>
<div> Block-level container <div class="wrapper">...</div>
<span> Inline container <span class="highlight">text</span>

Block vs inline elements

  • Block elements (<div>, <h1>, <p>, <ul>) start on a new line and take full width.
  • Inline elements (<span>, <a>, <strong>, <img>) sit within a line and only take as much width as needed.

Common mistakes

  • Forgetting the <!DOCTYPE html> declaration — triggers quirks mode in older browsers.
  • Putting content directly in <head> instead of <body> — it will not display.
  • Closing a void element like <img> with </img> — self-closing: <img ...> or <img ... />.
  • Using <h1> for styling instead of structure — use <h1> once per page for the main heading.

Quick check below!

Next: Attributes & Links