All notes, in reading order - Page 19

How a Browser Turns Markup Into a Page

Parsing, the DOM, style matching, layout and paint. Knowing this pipeline explains why script placement matters, why images need dimensions, and why b...

HTML

Headings h1 to h6 and the Document Outline

Headings are the table of contents of your page. Choose the level from where the section sits in the outline, never from how big the text should look.

HTML

Paragraphs, Line Breaks and Thematic Breaks

The p element is the workhorse of body copy. br and hr look like spacing tools but are content, and using them for layout is the most common beginner...

HTML

Emphasis and Importance: strong, em, b and i

Four elements, two that look bold and two that look italic, and the pairs are not interchangeable. The difference is meaning, and screen readers act o...

HTML

The Small Text Elements: mark, small, del, ins, sub and sup

Six narrow elements that each solve one problem precisely: highlighting a match, fine print, tracked edits, and characters that sit above or below the...

HTML

Quotations, Code and Preformatted Text

blockquote, q, cite, abbr, code, pre, kbd and samp. Eight elements that make quoted material and technical text mean what it says.

HTML

The Anchor Element: Turning Text Into a Link

One element built the web. Learn the href attribute, what makes link text good or useless, the target and rel attributes, and why a link is not a butt...

HTML

Absolute, Relative and Root Relative URLs

The same page, three ways to point at it. Learn how a browser resolves each form, when a leading slash saves you, and why one broken dot breaks an ent...

HTML

Fragment Links and In Page Navigation

Link to a spot on the same page with an id and a hash. The basis of tables of contents, skip links, footnotes and back to top links.

HTML

Email, Telephone and Download Links

The href attribute understands more than web pages. mailto, tel and the download attribute turn a link into an email draft, a phone call or a saved fi...

HTML

Building a Navigation Menu

A menu is a list of links inside a nav element. Learn the markup that makes it accessible, how to mark the current page, and how a dropdown should be...

HTML

The img Element: Putting Pictures on a Page

src, alt, width and height. Four attributes, and three of them are doing more work than most people realise.