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.
HTML
A complete HTML path: document structure, text, links, media, tables, forms, semantic markup, HTML5, metadata, accessibility, SEO, tooling, projects and assessment.
113 notes in 20 topics
Topics in HTML
HTML Basics 7
Text and Formatting 5
Links and Navigation 5
Images and Media 7
Lists 3
Tables 5
Forms 9
Semantic HTML 5
HTML5 Features 7
Head and Metadata 5
HTML with CSS 5
HTML with JavaScript 5
Accessibility 6
HTML SEO 10
DevTools and Debugging 4
Editor Productivity 3
HTML Best Practices 4
HTML Projects 6
Advanced Projects 5
Practice and Exams 7
Notes
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
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
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
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
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
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
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
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
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
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
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.