HTML Notes - Page 5

The DOM: What the Browser Builds From Your Markup

Your file is text. The DOM is the live tree the browser built from it, and they are not the same thing. Knowing the difference is what makes debugging...

HTML

Loading Scripts: defer, async and type=module

Where a script tag sits and which attribute it carries decides whether your page paints in half a second or four. Three loading behaviours, and when e...

HTML

Responsive Design Starts in the Markup

The viewport tag, flexible images, relative units and the mobile first habit. Half of responsive design is decided before a single media query is writ...

HTML

Writing Markup That CSS Can Lay Out

Grid and flexbox changed what markup a layout needs. Fewer wrappers, source order that matches reading order, and the reorder trap that breaks keyboar...

HTML

CSS Selectors Your Markup Makes Possible

The structure you write decides which selectors are available. Attribute selectors, sibling combinators and structural pseudo classes can replace a su...

HTML

The class and id Attributes

Two ways to name an element, with different rules and different jobs. Choosing correctly makes a stylesheet maintainable and stops the specificity war...

HTML

Three Ways to Attach CSS, and When Each Is Right

External, internal and inline styles. One of them is the answer almost always, and knowing why the other two exist is what tells you when to break the...

HTML

Favicons and App Icons

The small icon in a tab, and the larger ones a device uses when a site is saved to a home screen. A short modern set replaces the twenty file mess of...

HTML

Open Graph and Social Sharing Metadata

Control what appears when your page is shared in a chat, a feed or a message. Without these tags the platform guesses, and it usually guesses badly.

HTML

Meta Description, Robots and Canonical

Three head entries that shape how a page appears in search results, whether it is indexed at all, and which URL gets the credit.

HTML

Character Encoding and the Viewport Meta Tag

Two lines that every page needs. One decides whether your text is readable at all, the other decides whether your page works on a phone.

HTML

The head Element and the Page Title

Nothing in the head is drawn, and yet it decides how the page is found, shared, cached and rendered. The title alone is the most valuable line of mark...