Writing HTML
Introduced| English | Meaning |
|---|---|
| HTML/ˌeɪtʃ tiː em ˈel/ | The markup language used to describe the structure and content of web pages. |
| attribute/ˈætrɪbjuːt/ | A named property or characteristic associated with an object, element or record. |
| element/ˈelɪmənt/ | A substance made of atoms with the same proton number. |
| semantic elements/səˈmæntɪk ˈelɪmənts/ | semantic elements |
It looks like a link, but Tab skips it
- A styled rectangle saying “Join” is not automatically a working link. A real anchor with a destination has browser behaviour that styling alone does not supply.
- HTML 超文本标记语言 gives content structure and meaning. CSS controls presentation; choosing meaningful HTML also supports keyboard and assistive-technology use.
Why use a real heading element for a page heading?
Difficulty 1/5 · 100 coins + a small bonus on first completion today
A heading describes document structure. Appearance can then be controlled with CSS.
Read the tag and its attributes
- An element 元素 often has a start tag, content and an end tag:
<p>Meet on Thursday.</p>. An attribute 属性 supplies information in the start tag:<a href="join.html">Join</a>. - An HTML void element such as
imghas no end tag or child content. It does not “close itself”; a trailing slash is unnecessary in HTML. Nest paired tags without crossing them.
Which attribute gives an anchor its navigation destination?
Difficulty 1/5 · 100 coins + a small bonus on first completion today
An anchor such as How to join uses href.
Mark the page regions by purpose
- Semantic elements 语义化元素 include
navfor major navigation andmainfor the page's main content. Use headings to describe sections anddivfor a generic grouping when no more specific element fits. - A native
awithhrefnavigates; a nativebuttonperforms an action. Semantic markup helps, but labels, behaviour and focus still need testing.
Which elements have these specific HTML meanings? Select all that apply.
Difficulty 2/5 · 140 coins + a small bonus on first completion today
div is generic. Use a more specific element when its defined purpose fits.
Match the intended purpose to a suitable native element.
Difficulty 2/5 · 140 coins + a small bonus on first completion today
Native elements supply meaning and default behaviour, which still need usable labels and testing.
Build a small complete page
- Save this example as
index.htmlbeside a realjoin.html. Open it in a browser and follow the link using Tab and Enter. langidentifies the page language;titlenames the browser tab. The viewport setting lets responsive styles use the device width.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Robotics club</title>
</head>
<body>
<nav aria-label="Main"><a href="join.html">How to join</a></nav>
<main>
<h1>Robotics club</h1>
<p>Meet Thursday at 4 pm in room 12.</p>
</main>
</body>
</html>
<a href="join.html">How to join</a> combines a destination and a useful label. <div class="link">Click here</div> provides neither native navigation nor a destination.
Choose alternatives by the image's purpose
- An informative image needs an alternative conveying its relevant meaning. A purely decorative image normally uses
alt=""so assistive technology can skip it. - For an image used as a link, describe the link's function when that information is not otherwise supplied. A complex chart also needs its important data explained in text.
Do not use headings merely to enlarge text, or repeat “image” as every alternative. Equally, do not give decorative images lengthy descriptions that interrupt the page.
alt="image" is a useful alternative for an informative chart.
Difficulty 1/5 · 100 coins + a small bonus on first completion today
The alternative must convey the relevant information. A complex chart also needs its important data in text.
A club news story uses a photograph to show students planting trees in the school yard. Write useful alt text.
Difficulty 3/5 · 200 coins + a small bonus on first completion today
Example: “Students planting trees in the school yard.” Do not invent a count that was not supplied.
A small flourish beside a heading adds no information. Which image alternative normally fits?
Difficulty 1/5 · 100 coins + a small bonus on first completion today
An empty alternative lets assistive technology skip a purely decorative image.
Verify structure and behaviour
- Check the heading order, meaningful link labels, keyboard use and image alternatives. An HTML validator can detect markup errors, but cannot judge whether your wording is useful.
- Make the meeting page usable with styles turned off. Then style the content without changing headings into appearance-only shortcuts.
Choose HTML by purpose. Use native links and buttons, valid nesting and image alternatives that match the image's role.
Sources: HTML syntax and W3C decorative images.
In HTML, img is a void element and must not have an end tag.
Difficulty 1/5 · 100 coins + a small bonus on first completion today
Void elements have no child content or end tag. A trailing slash is unnecessary; it does not give HTML elements self-closing behaviour.