HTML Text, Links, Images, Tables, and Forms

HTML Text Content

HTML (HyperText Markup Language) is the skeleton of every web page. You use elements — opening tags, content, and closing tags — to describe what each piece of content is, not how it looks. Browsers and assistive technologies rely on that meaning.

Headings (`<h1>` through `<h6>`) create a document outline. Use one `<h1>` per page for the main topic, then nest lower headings in order. Do not skip levels just to get a certain size — use CSS for styling instead. Paragraphs use `<p>`. Inline emphasis uses `<strong>` (strong importance) and `<em>` (stress emphasis).

Lists come in two forms. An ordered list (`<ol>`) implies sequence — steps in a process. An unordered list (`<ul>`) groups items without a required order. Each item in either type is wrapped in `<li>`.

Hyperlinks

The anchor element `<a>` creates a hyperlink. Its `href` attribute holds the destination.

• Absolute paths include the full URL: `https://example.com/about.html`. Use these for external sites.
• Relative paths describe the location relative to the current file: `../images/logo.png` or `contact.html`. Use these for files within your own project so the site works regardless of the server it is hosted on.
• Internal anchors link to an element on the same page. Add an `id` attribute to the target element (`<section id="services">`), then link with `href="#services"`.

Always write link text that describes the destination. "Click here" is meaningless out of context; "View our service list" is not.

Images

The `<img>` element is a void element (no closing tag). Its required attributes are `src` (file path) and `alt` (alternative text).

Alt text serves two purposes: it is read aloud by screen readers for users who cannot see the image, and it displays when the image fails to load. Write alt text that conveys the image's purpose in context. A photo of a technician at a workstation might get `alt="Technician connecting fiber-optic cables in a server rack"`. If the image is purely decorative (a colored divider line), use an empty alt attribute: `alt=""` — this tells assistive technology to skip it entirely. Never omit the `alt` attribute altogether; that forces a screen reader to announce the file name instead.

Data Tables

HTMLtables are for tabular data — information that has a meaningful row-and-column relationship. Never use tables just to create a visual layout.

A well-structured table includes:

• `<caption>` — a visible title placed immediately after the opening `<table>` tag.
• `<thead>` — groups the header row(s).
• `<tbody>` — groups the data rows.
• `<th>` elements with a `scope` attribute for every header cell.
• `scope="col"` means the header describes the column below it.
• `scope="row"` means the header describes the row to its right.

The `scope` attribute is the primary accessibility mechanism for tables. Without it, a screen reader user navigating cell by cell cannot know which column or row a cell belongs to.

Accessible HTML Forms

Forms collect user input. Every input must have an associated `<label>`. The connection is made with matching `for` and `id` attributes:

```html

<label for="email">Email address</label>

<input type="email" id="email" name="email" required>

```

Common input types and when to use them:

| Type | Use case |

|---|---|

| `text` | General short text |

| `email` | Email address (browser validates format) |

| `tel` | Phone number |

| `textarea` | Multi-line message |

| `select` / `option` | Choosing from a fixed list |

| `checkbox` | Binary yes/no or multiple selections |

| `submit` | Form submission button |

Using the correct `type` triggers the right keyboard on mobile, enables browser validation, and communicates purpose to assistive technology.

Tab-order navigation: by default, browsers move keyboard focus through interactive elements in source order when the user presses Tab. Test every form with keyboard only — no mouse — before submitting work. Every field must be reachable and usable without a pointing device. This is a WCAG 2.1 success criterion and a practical accessibility baseline.

Validation and Safety

Run your finished HTML through the W3C Markup Validation Service (validator.w3.org). Validation catches unclosed tags, duplicate IDs, missing required attributes, and other errors that may render differently across browsers or break assistive technology.

Digital workspace safety: Keep cables managed at your station to prevent trip hazards. Position your monitor at eye level and maintain a neutral wrist posture to prevent repetitive strain. Take brief breaks every hour — sustained focus on a screen without breaks contributes to eye strain and musculoskeletal fatigue, both recognized ergonomic hazards in computer-based trades.