HTML Notes - Page 6

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...

HTML

The dialog Element: Native Modals

Modals with focus trapping, backdrop, Escape handling and inertness supplied by the browser. A component that used to need a library is now one elemen...

HTML

The template Element

Markup that is parsed but not rendered, waiting to be cloned. The clean way to build repeated content in JavaScript without writing HTML as strings.

HTML

Web Storage and Browser APIs from a Page

localStorage, sessionStorage and geolocation. What a page can remember, what it must ask permission for, and what should never be stored in the browse...

HTML

SVG in HTML

Vector graphics that scale perfectly, weigh almost nothing and can be styled with CSS. Learn inline SVG, SVG as an image, and how to make one accessib...

HTML

The canvas Element

A blank bitmap you draw on with JavaScript. Powerful for graphics and games, and invisible to every reader who cannot see the screen.