Cheat sheet: Structure and meaning

The 40 terms of this lesson, part by part, with the French word a team in France would use.

1. Three layers make one page

HTMLHTML: the language that holds a page's content and labels what each part is, such as a heading, a link or a list.
CSSCSS: the language of style rules that decide how each part of a page looks and where it is placed on the screen.
JavaScriptJavaScript: the programming language that browsers run to add behaviour to a page, such as a menu that opens.
Style rulerègle CSS: an instruction in CSS that says how every element of one kind looks, such as "main buttons are blue".
Page sourcecode source de la page: the HTML exactly as the server sent it, shown when you right-click a page and choose "View page source".
Quotedevis: a firm written offer with the price, the dates and the work included, signed before the work starts.

Screen readerlecteur d'écran: software that reads a page aloud, so that blind people and people with poor sight can use it.
Headingtitre: a title that the HTML marks as the start of a section, so that screen readers can list it and jump to it.
Tab keytouche Tab: the key that moves from one link, button or form field to the next, so that a page can be used without a mouse.
Page languagelangue de la page: the language declared in a page's HTML, which screen readers use to choose their voice and pronunciation.
Page titletitre de la page: the name of a page, shown in the browser tab and in search results.

Elementélément: one part of a page in the HTML, such as a heading, a paragraph, a link, a picture or a button.
Tagbalise: the marker written around content in HTML to say which element it is, such as <h1> and </h1> around a heading.
Linklien: an element that goes somewhere, to another page or another place on the same page, with an address you can share.
Buttonbouton: an element that does something on the page, such as opening a menu or sending a form.
Heading levelsniveaux de titre: the ranks of the headings in HTML, from h1 for the main heading of a page to h2 and h3 for its sections.
divdiv: an HTML element that is a box with no meaning, used only to group other parts of the page.
navnav: the HTML element that holds a group of links for moving around a site, such as the main menu.
hrefhref: the attribute of a link (the a element) that holds the address the link goes to, as in href="/cv".

Alt texttexte alternatif: a short text that replaces a picture, read aloud by screen readers and shown if the picture doesn't load.
Attributeattribut: an extra piece of information written inside a tag, such as the address of a link or the alt text of a picture.
altalt: the attribute of a picture (the img element) that holds its alt text, left empty for a decorative picture.
imgimg: the HTML element that places a picture on the page, with the picture's file named in its src attribute.
Decorative pictureimage décorative: a picture that adds no information to the page, such as a background of waves, which gets an empty alt text.
Screen readerlecteur d'écran: software that reads a page aloud, so that blind people and people with poor sight can use it.

Accessibilityaccessibilité: how well people with a disability can use a site, for example with a screen reader, the keyboard or larger text.
Tab keytouche Tab: the key that moves from one link, button or form field to the next, so that a page can be used without a mouse.
Focus outlineindicateur de focus: the visible outline that shows which link, button or form field the Tab key has reached.
Developer toolsoutils de développement: the panels built into every browser, opened with F12, that show a page's code, style rules and errors.
LighthouseLighthouse: a free audit in Chrome's developer tools that scores a page's speed and accessibility and lists its problems.
Accessibility treearbre d'accessibilité: the page as screen readers receive it, with its headings, links, buttons and text, shown in the Elements panel.
Accessibility widgetwidget d'accessibilité: an icon added to a site that promises to make it accessible in one line of code, without changing the HTML.
RGAARGAA: the official French standard that says how to make a site usable by people with disabilities.

Briefbrief: a short document that says what to build, for whom and within which limits.
Semantic HTMLHTML sémantique: HTML that labels each part of a page for what it is, such as a heading, a menu or a button.
RGAARGAA: the official French standard that says how to make a site usable by people with disabilities.
Focus outlineindicateur de focus: the visible outline that shows which link, button or form field the Tab key has reached.
Alt texttexte alternatif: a short text that replaces a picture, read aloud by screen readers and shown if the picture doesn't load.
CMSCMS: the admin screen where people write and publish a site's content without editing its code, such as WordPress.
Accessibility widgetwidget d'accessibilité: an icon added to a site that promises to make it accessible in one line of code, without changing the HTML.

Web Technologies · How a page is made · wt.thomasjuldo.com/course/how-a-page-is-made/structure-and-meaning