BiteSizedChunks.comLearn one small thing at a time.

Course contentsShow

Web Development

46What is Semantic HTML?
47The <header> Element
48The <nav> Element
49The <main> Element
50The <article> Element
51The <section> Element
52The <aside> Element
53The <footer> Element
54Heading Hierarchy (h1-h6)
55The <address> Element
56The <figure> and <figcaption> Elements
57The <time> Element
58The <mark> Element
59Nesting Semantic Elements
60When to Use <div> vs Semantic Elements
61Sectioning Roots and Outlines
62Semantic Elements and Accessibility
63Common Semantic Structure Patterns
64Paragraphs and Line Breaks
65Headings Hierarchy (h1-h6)
66Strong and Emphasis
67Bold, Italic, and Underline
68Inline Text Semantics (mark, small, sub, sup)
69Quotations and Citations
70Code and Preformatted Text
71Abbreviations and Definitions
72Hyperlinks Fundamentals
73Link Types and Relationships
74Images: src, alt, and Accessibility
75Figure and Figcaption
76Horizontal Rules and Thematic Breaks
77Time and Data Elements
78Text Direction and Language
79The Document Type Declaration
80The <html> Element and Language Attributes
81The <head> Element Structure
82Character Encoding with <meta charset>
83Viewport Configuration for Responsive Design
84The <title> Element
85Meta Description for SEO
86Linking External Stylesheets
87Favicon and Icon Links
88Preloading and Resource Hints
89Script Loading Strategies
90Base URL and Document Relationships
91The <form> Element and Form Submission
92Text Input Types: text, email, tel, url
93Password and Search Inputs
94Number and Range Inputs
95Date and Time Input Types
96Checkbox and Radio Inputs
97File Input and Accept Attribute
98Hidden and Color Inputs
99The <textarea> Element
100The <select> and <option> Elements
101Grouping Options with <optgroup>
102The <label> Element and for Attribute
103The <fieldset> and <legend> Elements
104The <button> Element and Types
105Required, Disabled, and Readonly Attributes
106Placeholder and Autocomplete Attributes
107Pattern and Title for Validation
108Min, Max, Minlength, and Maxlength
109Form Validation Attributes and :invalid
110The <datalist> Element for Autocomplete
111Table Structure: <table>, <tr>, <td>
112Table Headers with <th>
113Table Caption with <caption>
114Grouping with <thead>, <tbody>, <tfoot>
115Spanning Cells: colspan and rowspan
116Column Groups: <colgroup> and <col>
117Accessible Table Headers with scope
118Styling Tables with CSS
119Responsive Table Patterns
120When to Use Tables vs. CSS Grid

Web Development

46What is Semantic HTML?
47The <header> Element
48The <nav> Element
49The <main> Element
50The <article> Element
51The <section> Element
52The <aside> Element
53The <footer> Element
54Heading Hierarchy (h1-h6)
55The <address> Element
56The <figure> and <figcaption> Elements
57The <time> Element
58The <mark> Element
59Nesting Semantic Elements
60When to Use <div> vs Semantic Elements
61Sectioning Roots and Outlines
62Semantic Elements and Accessibility
63Common Semantic Structure Patterns
64Paragraphs and Line Breaks
65Headings Hierarchy (h1-h6)
66Strong and Emphasis
67Bold, Italic, and Underline
68Inline Text Semantics (mark, small, sub, sup)
69Quotations and Citations
70Code and Preformatted Text
71Abbreviations and Definitions
72Hyperlinks Fundamentals
73Link Types and Relationships
74Images: src, alt, and Accessibility
75Figure and Figcaption
76Horizontal Rules and Thematic Breaks
77Time and Data Elements
78Text Direction and Language
79The Document Type Declaration
80The <html> Element and Language Attributes
81The <head> Element Structure
82Character Encoding with <meta charset>
83Viewport Configuration for Responsive Design
84The <title> Element
85Meta Description for SEO
86Linking External Stylesheets
87Favicon and Icon Links
88Preloading and Resource Hints
89Script Loading Strategies
90Base URL and Document Relationships
91The <form> Element and Form Submission
92Text Input Types: text, email, tel, url
93Password and Search Inputs
94Number and Range Inputs
95Date and Time Input Types
96Checkbox and Radio Inputs
97File Input and Accept Attribute
98Hidden and Color Inputs
99The <textarea> Element
100The <select> and <option> Elements
101Grouping Options with <optgroup>
102The <label> Element and for Attribute
103The <fieldset> and <legend> Elements
104The <button> Element and Types
105Required, Disabled, and Readonly Attributes
106Placeholder and Autocomplete Attributes
107Pattern and Title for Validation
108Min, Max, Minlength, and Maxlength
109Form Validation Attributes and :invalid
110The <datalist> Element for Autocomplete
111Table Structure: <table>, <tr>, <td>
112Table Headers with <th>
113Table Caption with <caption>
114Grouping with <thead>, <tbody>, <tfoot>
115Spanning Cells: colspan and rowspan
116Column Groups: <colgroup> and <col>
117Accessible Table Headers with scope
118Styling Tables with CSS
119Responsive Table Patterns
120When to Use Tables vs. CSS Grid

← Web Development

Lesson 109 of 2,982·2. HTML FundamentalsPro lesson

Form Validation Attributes and :invalid

Understanding native HTML5 validation states and styling invalid inputs with CSS pseudo-classes.

This lesson is for subscribers

You've completed the free preview. Subscribe to unlock every lesson in every course.

See pricing Back to course