Writing HTML
Vocabulary
| English | Chinese | Pinyin |
|---|---|---|
| HTML | 超文本标记语言 | chāo wén běn biāo jì yǔ yán |
| element | 元素 | yuán sù |
| attribute | 属性 | shǔ xìng |
| semantic elements | 语义化元素 | yǔ yì huà yuán sù |
HTML marks up meaning, not appearance
- A heading is
<h1>because it is a heading, not because you want big text. - HTML 超文本标记语言 describes what each part of a page is; CSS decides how it looks.
- Keeping those separate is the single idea the unit is built on, and it is what makes a site maintainable.
Practice
Why is a heading written as
rather than styled text?
HTML marks meaning. Browsers, search engines and screen readers all act on that meaning.
Elements and attributes
- An element 元素 has an opening tag, content, and a closing tag:
<p>text</p>. - An attribute 属性 goes inside the opening tag:
<a href="about.html">About</a>. - Some elements are empty and close themselves:
<img src="cat.jpg" alt="A cat">. - Nest correctly.
<p><strong>text</strong></p>is valid; crossing the tags over is not.
Practice
Which attribute holds the destination of a link?
About. The attribute goes inside the opening tag.
Semantic elements
- Semantic elements 语义化元素 —
<header>,<nav>,<main>,<article>,<footer>— say what a region is. - A browser, a search engine and a screen reader all read them. A
<div>tells them nothing. - ⚠ A page built entirely from
<div>renders identically and is worse in every way that is measured.
Practice
Which are semantic elements? Choose all that apply.