HTML and CSS

117 flashcards by MentisLibrary

Semantic markup and forms, the box model, flexbox and grid, selectors and specificity, responsive layout with media and container queries, custom properties, and the accessibility basics that go with them.

What does a semantic element give you that a <div> does not?
Meaning. A semantic element tells the browser, assistive technology and other tools what the content is, and several of them map to landmark roles in the accessibility tree.
<head> vs <header>
<head> holds document metadata that is not rendered: title, character set, stylesheets, meta tags. <header> is visible page content introducing a section or the page.
What is <main> for?
The dominant content of the document, the part that is unique to this page rather than repeated across the site.
<article> vs <section>
<article> is a self-contained composition that would still make sense syndicated on its own. <section> is a thematic grouping inside a larger document.
What does <nav> mark?
A block of major navigation links, either for the whole site or within the current page.
What is <aside> for?
Content tangentially related to the surrounding content, such as a pull quote, a related-links box or an advertisement.
How should heading levels be used?
In order, one level at a time, so the headings form an outline of the page. <h1> is the page title, <h2> its major sections, <h3> their subsections.
<figure> and <figcaption>
<figure> wraps self-contained referenced content such as an image, chart, code listing or quote; <figcaption> gives it a caption that is programmatically tied to it.
What does <time datetime> do?
Marks up a date or time in a machine-readable form while the element's text stays human-readable.
<button> vs <a>
A <button> performs an action in the page. An <a href> navigates to another location. Choose by what happens, not by how it looks.
How do you associate a label with a form control?
Either wrap the control in the <label>, or point the label's for attribute at the control's id.
Which <input> type should a phone number field use?
type="tel", which brings up a telephone keypad on touch devices without imposing a format.
GET vs POST on a <form>
GET puts the fields in the URL query string and should be used for requests that only read. POST puts them in the request body and is for requests that change state.
What is HTML constraint validation?
Attributes such as required, min, max, minlength, maxlength, pattern and type that the browser checks before submitting, with matching :valid and :invalid CSS states.
What do <fieldset> and <legend> do?
<fieldset> groups related controls and <legend> names the group, so the group name is announced with each control inside it.
How is an accessible data table marked up?
<caption> for the table's name, <thead> and <tbody> for structure, and <th> with a scope of col or row for the headers.
What goes in an image's alt attribute?
The information the image conveys in its context, in a sentence or less. If the image is purely decorative, use alt="" so assistive technology skips it.
What do srcset and sizes do?
srcset lists candidate image files with their widths, and sizes tells the browser how wide the image will be laid out, so it can pick the smallest file that still looks sharp.
When do you need <picture> rather than srcset?
When the sources differ in more than size: a different crop, a different aspect ratio, or a different file format.
What does the viewport meta tag do?
Tells a mobile browser to lay the page out at the device's own width instead of pretending to be a roughly 980 pixel desktop and zooming out.
What does <!DOCTYPE html> do?
Switches the browser into standards mode. It is not a version declaration and has no other effect.
defer vs async on a <script>
Both download the script without blocking parsing. defer runs it after the document is parsed, in document order. async runs it as soon as it has downloaded, in whatever order that happens.
What do <details> and <summary> give you?
A native disclosure widget: <summary> is the always-visible label, and the rest of the <details> content shows and hides when it is toggled.
What does <dialog> with showModal() provide?
A native modal: it is promoted to the top layer above all other content, gets a ::backdrop pseudo-element, traps Tab focus inside itself, and closes on Escape.
What is a data-* attribute for?
Attaching custom data to an element without inventing a non-standard attribute. It is readable in CSS attribute selectors and from JavaScript through the dataset property.
vs <div>
Both are meaningless containers. is inline and belongs inside a line of text; <div> is block level and wraps sections of content.
When must you write & or <?
When the literal character would otherwise be parsed as markup: & starting an entity and < opening a tag. > and " are needed in fewer places but are safe to use.
What are the four parts of the CSS box model?
From the inside out: the content box, then padding, then the border, then the margin. Padding and border are inside the element's visible box; margin is space outside it.
content-box vs border-box
With content-box, the default, width sizes the content only and padding and border are added on top. With border-box, width includes the padding and border.
What is margin collapsing?
Adjoining vertical margins between block boxes combine into one margin equal to the largest of them, rather than adding up.