HTML structure and common tags

§Text Passage

1Summary 重點摘要

HTML marks content with paired tags. Skeleton: DOCTYPE, html, head (for the browser), body (for visitors). Common: h1-h6 headings, p paragraphs, ul/ol+li lists, a links, img images; semantic tags header/nav/main/footer let machines read the structure too.

2Vocabulary cards Vocabulary

3Step by step Steps

1. The smallest page skeletonEvery page file shares one skeleton: ＜!DOCTYPE html＞ declares an HTML5 document; ＜html＞ wraps everything; ＜head＞ holds browser-facing information such as ＜title＞My page＜/title＞, which shows on the browser tab rather than on the page; ＜body＞ holds everything a visitor sees. Save the skeleton as index.html and open it in a browser: the tab shows 'My page' and the page shows 'Hello!'. The skeleton is every page's foundation and must be memorised exactly.
2. Headings and paragraphs＜h1＞ to ＜h6＞ are six heading levels, h1 the largest and h6 the smallest; a page normally uses one h1 as the main title, with h2 and h3 subdividing the sections level by level — never skipping. ＜p＞ wraps a paragraph with automatic spacing before and after, as in writing ＜h1＞Class 3A home＜/h1＞ and ＜p＞My first web page.＜/p＞ inside body. Heading levels do more than set font size: they declare the document's structure to search engines and screen readers, and misused headings leave blind visitors lost.
3. Two kinds of listsTwo list kinds exist. The unordered list ul with li shows bullets: ＜ul＞＜li＞football＜/li＞＜li＞chess＜/li＞＜/ul＞; the ordered list ol numbers itself 1. 2.: ＜ol＞＜li＞boot up＜/li＞＜li＞log in＜/li＞＜/ol＞. The choosing standard is whether order carries meaning: a hobby list has no order and takes ul; procedure steps are order-critical and take ol. Every li must sit inside a ul or ol — placing li directly in body is invalid, and although the browser may still display it, the structure is already wrong.
4. Links and imagesLinks use the a tag: ＜a href="https://www.labzstudy.com"＞Visit LabzStudy＜/a＞, with href holding the destination and the text between being the clickable part; for another page on your own site write a relative path like ＜a href="about.html"＞About us＜/a＞. Images use the single img tag: ＜img src="images/campus.jpg" alt="A panorama of the campus"＞, where src points to the image location and alt is the description shown when the image cannot be seen; screen readers for the visually impaired speak the alt text, so it must never be left empty.
5. Semantic tagsSemantic tags state each part's purpose: ＜header＞ for the page top, ＜nav＞ for the navigation menu, ＜main＞ for the chief content, ＜footer＞ for the bottom. Inside body place them in order: ＜header＞Class 3A site＜/header＞, ＜nav＞Home | Gallery＜/nav＞, ＜main＞Welcome to our class site＜/main＞, ＜footer＞© 2026 Class 3A＜/footer＞. They look like div but tell machines what each region is, letting search engines and screen readers understand the structure. A page is not only drawn for people — it also speaks to machines.
6. The nesting rule: last opened, first closedTag nesting obeys 'last opened, first closed': for bold inside a paragraph write ＜p＞This is ＜strong＞key＜/strong＞ content＜/p＞ — strong opens inside p and must close before p closes. The crossed form ＜p＞...＜strong＞...＜/p＞＜/strong＞ may still render in lenient browsers, but the structure is wrong, the layout may fall apart, and the page's DOM tree becomes illegal. Check from the inside out: the tag opened last must close first, like packing small cases before big ones and unpacking small ones first.
7. Attributes and how to learnAttributes are extra information inside the opening tag, written name='value': href, src, alt, class and id are all attributes, and one tag may carry several, separated by spaces. The most effective way to learn HTML is write-and-look: create index.html in a text editor, save after every change and refresh the browser to see the effect at once. HTML rarely reports errors — it quietly misbehaves instead — so build the habit of small edits followed by immediate checks, and mistakes will never pile up.

4Diagrams Diagrams

5Worked example Example

6Common mistakes Mistakes

7Quick check Quick check

8Recap Recap

• HTML is a markup language: paired tags wrap content; last opened, first closed.
• The skeleton's four pieces: DOCTYPE, html, head (for the browser), body (for visitors).
• Everyday tags: h1-h6 headings, p paragraphs, ul/ol with li lists, a links, img images.
• Attributes sit in the opening tag: href for destinations, src for image files, alt as the required description.
• Semantic tags header/nav/main/footer let machines read the page structure too.