HTML Fundamentals

Build the structure of web pages with semantic HTML5: elements, attributes, forms, tables, and accessibility best practices.

Easy 50m 3 tasks

Prerequisites: How the Web Works

Learning Objectives

→ Write valid HTML5 documents with correct DOCTYPE and structure
→ Use semantic elements: header, nav, main, section, article, footer
→ Build forms with inputs, labels, validation attributes
→ Understand the DOM tree structure
→ Apply accessibility attributes (alt, aria-label, role)

Document Structure

Every HTML page starts with this skeleton:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- visible content here -->
  <script src="app.js"></script>
</body>
</html>

Semantic Elements

Semantic elements describe their meaning to both browser and developer:

<header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h1>Article Title</h1>
    <p>Content paragraph.</p>
    <section>
      <h2>Section Heading</h2>
      <p>More content.</p>
    </section>
  </article>

  <aside>Related links</aside>
</main>

<footer>
  <p>&copy; 2024 CyberLearn</p>
</footer>

Headings & Text

<h1>Main Title (one per page)</h1>
<h2>Section Title</h2>
<h3>Subsection</h3>
<p>A paragraph of text.</p>
<strong>Bold/important</strong>
<em>Italic/emphasis</em>
<code>inline code</code>
<pre><code>code block</code></pre>
<blockquote>A quote from somewhere.</blockquote>
<br>  <!-- line break -->
<hr>  <!-- horizontal rule -->

Links & Images

<!-- Links -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  External Link
</a>
<a href="/about">Internal Link</a>
<a href="mailto:[email protected]">Email</a>
<a href="#section-id">Anchor</a>

<!-- Images -->
<img src="logo.png" alt="Company logo" width="200" height="100">
<!-- alt is mandatory for accessibility -->

Lists

<!-- Unordered -->
<ul>
  <li>Item one</li>
  <li>Item two</li>
</ul>

<!-- Ordered -->
<ol>
  <li>First step</li>
  <li>Second step</li>
</ol>

<!-- Description list -->
<dl>
  <dt>TCP</dt>
  <dd>Transmission Control Protocol</dd>
</dl>

Tables

<table>
  <thead>
    <tr>
      <th scope="col">Port</th>
      <th scope="col">Service</th>
      <th scope="col">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>22</td>
      <td>SSH</td>
      <td>Open</td>
    </tr>
    <tr>
      <td>80</td>
      <td>HTTP</td>
      <td>Open</td>
    </tr>
  </tbody>
</table>

Forms

Forms are critical — and a common attack surface:

<form action="/login" method="POST" novalidate>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"
         required minlength="3" maxlength="50"
         placeholder="Enter username" autocomplete="username">

  <label for="password">Password:</label>
  <input type="password" id="password" name="password"
         required minlength="8" autocomplete="current-password">

  <label for="role">Role:</label>
  <select id="role" name="role">
    <option value="user">User</option>
    <option value="admin">Admin</option>
  </select>

  <label>
    <input type="checkbox" name="remember"> Remember me
  </label>

  <button type="submit">Log In</button>
</form>

Input types: text, password, email, number, tel, url, date, file, checkbox, radio, hidden, submit

The DOM Tree

HTML becomes a tree of nodes in memory:

document
└── html
    ├── head
    │   ├── meta
    │   └── title
    └── body
        ├── header
        │   └── nav
        └── main
            └── article
                ├── h1
                └── p

JavaScript and CSS traverse this tree to read/modify content.

Accessibility

<!-- Images always need alt text -->
<img src="scan.png" alt="Network scan results showing 3 open ports">

<!-- Buttons need labels -->
<button aria-label="Close dialog">✕</button>

<!-- Form inputs linked to labels -->
<label for="ip">Target IP:</label>
<input id="ip" name="ip" type="text" aria-describedby="ip-hint">
<span id="ip-hint">Enter a valid IPv4 address</span>

<!-- Landmark roles -->
<nav role="navigation" aria-label="Main menu">...</nav>

Security Notes

Never trust HTML form validation alone — always validate server-side
method="GET" puts form data in the URL (bad for passwords)
autocomplete="off" on sensitive fields
target="_blank" without rel="noopener" is a security risk

Create index.html with: <!DOCTYPE html>, <html lang='en'>, proper head section, and a body using <header>, <main>, <article>, and <footer> elements. Open in a browser.

✦ Answer the questions to complete this task

What element wraps the entire visible page content?

How many h1 elements should a page ideally have?

Create a login form with: text input for username (minlength=3, required), password input (minlength=8, required), a checkbox 'Remember me', and a submit button. Use <label for=...> for each input.

✦ Answer the questions to complete this task

What form method should a login form use?

What input type hides the typed characters?

Build an HTML table showing 5 network ports: columns Port, Protocol, Service, Status. Use <thead> and <tbody>. Add scope='col' to all <th> elements.

✦ Answer the questions to complete this task

What element contains table header cells?

What attribute on th improves accessibility?