Notes on html

Accessibility

Good practice to use semantic tags to show structure of a page, e.g.

<body>
<header></header>
<nav></nav>
<main>
    <section><div></div></section>
    <section>
        <img src="image.png" alt="Alt Text">
        <figcaption>Caption here.</figcaption>
    </section>
</main>
<footer></footer>
</body>
1
2
3
4
5
6
7
8
9
10
11
12

An example of an audio tag below.

Without css browsers do a nice job of formatting a radio group within a fieldset using the legend as a label for the group.

What level ninja are you?

Wrapping a date or time written in text on a page with a time tag with a datetime atttribute means that screen readers have access to a standard date and time format no matter how the text is written.

This page was written on .

Elements on a page can be given an accesskey attribute which must be a single character which then creates a keyboard shortcut for the element (a link, a button, for example). Different browsers and platforms have differing ways to trigger the access key.