Lecture 2 Pre-doing

Press right arrow →

Instructions

Use Google Chrome. Other browsers will likely work too, but let's have a consistent environment.
Go through the slides with the keyboard arrow keys
Experiment with the demos. The code examples are editable.
Read the notes in the top right corner and follow any documentation links
If the “Open in new tab” button doesn’t work, disable AdBlock

Hierarchy

6 levels of headings: h1 to h6
Do not use just to make text bigger, it breaks navigation for visually impaired users who use screen readers. Use CSS instead, which gives you more control anyway.
Use h1 only once per document
Avoid gaps in the document outline, e.g. having h2 and h4 but no h3
Sectioning elements such as section, article denote units of content.
Headings inside sectioning elements etc supposedly follow the hiearchy of the sectioning elements but no browser implements this besides superficial styling. The semantics exposed to screen readers are still those of the tag name (in this case h1). Therefore, the current guidance is to use the appropriate heading level manually, even within sectioning elements.

Meta:

In code slides you can use the Next and ◂ buttons at the top of the slide to navigate forward and backward.
Click on "Notes" to close this. In the rest of the slides these will be collapsed by default.

Inline elements

Common text-level elements:

strong

Text with strong importance, seriousness, or urgency. Browsers typically render the contents in bold type.

em

Text with stress emphasis. Browsers typically render the contents in italic type.

mark

Text which is marked or highlighted for reference or notation purposes, due to the marked passage's relevance or importance in the enclosing context.

code

For short fragments of computer code that are inline with text. For entire blocks of code, use code inside pre. Browsers typically render the contents in monospace text.

time

Use this around dates, times, and durations, to provide a machine-readable date/time in addition to the human-readable one. Browsers do not typically display this element any differently than surrounding content, though this can always change.

span

Generic text-level container, which does not inherently represent anything. Use this if no other text-level element is semantically appropriate. You can make span elements look however you like, by adding CSS to them.
These are also called inline elements because they are inline with text, i.e. they do not create a rectangular box with line breaks before and after it like paragraphs and headings (though this behavior can change with CSS). You may also see such elements being referred to as phrasing content.
While it's tempting to use these elements for the formatting they carry by default, they are still semantic elements and should not be used merely for their typical rendering by browsers. If you merely need to present text as bold or italic, use a span + CSS, not a strong or em. To better understand the distinction, look here for a discussion of the difference between em and i (whose default rendering is identical)

Lists

There are three types of lists: unordered lists (ul), ordered lists (ol), and definition lists (dl) for key-value pairs
Lists can also be included in list items (li, dt, dd) for nested lists.
The end tags of all three kinds of list items are optional
There can be any number of dts to any dd and vice versa.

Hyperlinks

a elements let you link to other websites or even places in the current page.
The href attribute contains the link target, which is an absolute or relative (to the current page) URL
The content of the link is the text presented. Sadly there is no shortcut if you want to show the URL itself, you have to duplicate it (or automate this via CSS or JS).
To link to a specific place in a page, you need to find an element with an id attribute near that place. Then, you can just add #id to the URL.
You can link to specific places in the current page as well, if you just use #yourId as the URL.
Use target="_blank" to make the link open in a new tab

Multimedia

HTML has the following images for multimedia:
- img for images (browsers support at least )
- video for videos
- audio for sound files
Video and audio content

Figures

figure can contain any media content, or even other elements if they are used to draw a figure.
figcaption contains the caption. This is different than the alt attribute, which describes the image to visually impaired users, although in some cases they might overlap. In those cases, do not duplicate the content in the alt attribute.

Tables

There is a bunch of elements involved in creating tables:

table

Encompasses the entire table

tr

Table row

td

Table cell

th

Table header cell

thead

Table header

tbody

Table body (automatically generated if not specified). Open the demo in a new tab and inspect the table. Observe how there is a tbody element even though we didn't specify it.

tfoot

Table footer
Before CSS, tables were also (ab)used for page layout. This is currenttly considered a very bad practice. Tables are intended for tabular data ONLY, using them for presentation changes the meaning that HTML communicates to anything that consumes it and is particularly bad for screen readers, bots etc.

Generic containers

Elements for semantic sectioning:

header

Page or section header (title etc)

nav

Navigation (only once per page)

main

Main content (only once per page)

aside

Side content (e.g. anything that goes to a sidebar)

footer

Footer information of page or section
There are also section and article for breaking up content further.
The above carry meaning, but no mandatory styling.
In theory all of the above are sectioning elements, i.e. they can contain h1 elements too and the heading level just adjusts. In practice this is not quite implemented, so don’t do it.
There are also the span (for text) and div (for bigger sections of content) generic containers which carry no meaning. Only use them if no semantic element is appropriate.

Interactivity

Disclosure widget

The details element allows us to have hidden content, with a summary that toggles it.
If we don't provide a summary, the browser will generate a default one (usually “Details”)
The boolean attribute open makes it open by default. It is also added by the browser when the user opens it (which can then be used by CSS for styling). Add it to the examples here and observe what happens!
Fun fact: These notes that you're reading right now are in a details element, just styled this way with CSS. Inspect it to see for yourself!
Useful for decluttering an interface and hiding away controls that don't need to be visible at all times (e.g. settings, advanced info etc). However, there is a certain learnability tradeoff: often people don't notice this hidden content and don’t view it.

Input fields

The input element can generate a wide variety of form controls, differentiated by the type attribute. If no type attribute is present, type="text" is assumed.
The following only applies to textual inputs (text, url, email, tel etc):
- The placeholder attribute shows placeholder text when the field is empty. This is available on textarea too.
- The pattern attribute allows you to restrict input. This does not currently work on textareas, but there are efforts to make it so.
In numerical and date inputs (number, range, date, time etc), the min and max attributes allow you to restrict the range of input.
On number and range inputs, you can use the step attribute to control the increment (1 by default).

Multiple choices

Group radio buttons via the name attribute to make them mutually exclusive.
Set checked state on checkbox and radio buttons via the checked attribute
label elements are very useful for all form controls, but especially checkboxes and radios as they increase the target area!
Depending on the number of options, different form controls are more appropriate for usability:
- For < 4 options, prefer radios if you have space (sometimes avoiding clutter is more important, e.g. when part of a template that is multiplied), as they are the most efficient.
- Between 5-20 options, select menus are ideal
- For longer than 20 options, search time for select menus becomes longer than typing the first few characters. In those cases, use input with datalist for autocomplete)
The fieldset element is useful for grouping together related form controls.

Buttons & Forms

The button element creates buttons.
These buttons don’t do anything by themselves, but you can make them useful via JavaScript or form elements.
The action attribute of form elements controls which file will receive the submission. By default it's the current file.
What’s submitted? Only elements that are both enabled and have a name attribute.
target="_blank" works here too, to submit the form in a new tab

Web Components

- There are also *custom HTML elements*, which are distinguished from built-in HTML elements from the hyphen in their tag name. These are also called *Web Components*. - We will learn how to make our own later in the semester. Here we have used an [existing web component](https://shoelace.style/components/rating), from a library called [Shoelace](https://shoelace.style) - Similarly, we can have custom CSS properties, that are distinguished from the built-in ones because they start with a double hyphen (`--`). - Web Components make heavy use of custom CSS properties for styling custom aspects.

HTML resources

Looking for help online?

How to avoid bad/outdated resources

Always look at the publication date
Wikis are better. Prefer MDN over w3schools
The canonical source of truth is specifications (W3C, WHATWG), but they are hard to read as they are intended for browser developers. However, the closer to web standards an article is, the better. If there are citations to or mentions of specifications, it tends to be a better resource