Impressive Web Designing: HTML Structure, Tags and Attributes
What this domain tests
HTML describes the structure and meaning of a page; CSS later handles appearance. The exam checks tag spelling, attributes, correct nesting, empty elements, and the rendered output of a short snippet.
Document skeleton
Every page opens with the doctype, then html, head and body. The head holds metadata that is not painted in the page area: title (shown in the tab), meta, style and link. The body holds everything visible.
Core tags
- Headings h1 to h6, paragraphs, and the empty elements br and hr, which have no closing tag.
- Formatting: b/strong, i/em, u, sub, sup, mark.
- Lists: ul with type disc, circle or square; ol with type 1, A, a, I or i and an optional start; dl with dt and dd.
- Links: a with href and target. Images: img with src, alt and optional width and height.
- Tables: table, tr, th or td, caption, plus colspan and rowspan. Div is block-level, span is inline. Attributes always sit in the opening tag as name='value'.
Worked example
Markup containing an h2 'Notes', a ul with two li items, an img with src and alt, and an a with href and target='_blank' renders as a heading, a bulleted two-item list, the picture (or the alt text if the file is missing) and a link that opens in a new tab. Explain the output in that order and mention the alt fallback.
Traps
- Omitting the alt attribute on an image.
- Placing a block element such as div inside a paragraph.
- Writing href='#top' for an internal anchor without the #.
- Confusing the relative path images/pic.jpg with an absolute URL.
- Using ol when the items have no sequence.
- Forgetting that empty tags must not be closed with a separate end tag.