HTML Notes - Page 8

Checkboxes, Radio Buttons and Grouping

Checkboxes for many answers, radios for one. The name attribute is what groups radios, and fieldset with legend is what makes either group make sense.

HTML

Labels: The Most Important Element in a Form

A label names a field for every reader and grows its click target. Two ways to bind one, and the reasons a form without labels is not usable.

HTML

Input Types: Text, Email, Number, Date and the Rest

One element, more than twenty types. Choosing the right one gives you the correct mobile keyboard, free validation and better autofill, at no cost.

HTML

Form Structure: form, action and method

Every form is a container, a set of named controls and a submit button. Learn what action and method do, why name matters more than id, and what the b...

HTML

Responsive Tables on Small Screens

A table with eight columns cannot fit on a phone. Four patterns that keep the data usable, and the trade off each one makes.

HTML

Accessible Tables: scope, headers and id

A table a screen reader can read is a table with named headers. scope handles simple tables, headers and id handle the hard ones.

HTML

Spanning Cells with colspan and rowspan

One cell covering several columns or rows. Simple to write, easy to get wrong, and the arithmetic has to balance or the whole grid tears.

HTML

Table Sections: caption, thead, tbody, tfoot and colgroup

Row groups give a table a header, a body and a summary. They are what make long tables printable, scrollable and understandable.

HTML

Table Structure: table, tr, th and td

A table is for two dimensional data, never for layout. Learn the four core elements, the difference between th and td, and the test that tells you whe...

HTML

Nested Lists and Multi Level Menus

A sublist goes inside the li it belongs to, not beside it. That one rule fixes almost every broken nested list, and it is what makes a multi level men...

HTML

Description Lists: dl, dt and dd

The third list type, and the most misunderstood. A description list pairs terms with descriptions, which makes it right for glossaries, metadata and s...

HTML

Ordered and Unordered Lists

ul when the order does not matter, ol when it does. Plus the start, reversed, type and value attributes that most people never discover.