| Section 1: HTML Fundamentals |
1.1 |
A |
Describe the basic structure of an HTML document, including the <!DOCTYPE> declaration. |
| |
1.2 |
A |
Understand the distinction between block-level and inline elements. |
| |
1.3 |
A |
Identify and correctly use basic HTML entities. |
| |
1.4 |
A |
Explain the importance of character encoding. |
| |
1.5 |
A |
Utilize comments to document HTML code. |
| |
1.6 |
A |
Demonstrate the use of basic tags (html, head, title, body). |
| Section 2: Text Formatting and Structure |
2.1 |
C |
Implement text formatting tags such as strong, em, u, del, sup, sub, and mark. |
| |
2.2 |
C |
Demonstrate the use of headings (h1-h6) and their importance in structuring content and enhancing accessibility. |
| |
2.3 |
C |
Structure content with paragraphs (p) and manage text flow. |
| |
2.4 |
A |
Apply line breaks (br) and horizontal rules (hr) for content separation. |
| |
2.5 |
C |
Use the blockquote, q, cite, and abbr tags appropriately. |
| |
2.6 |
F |
Employ code, pre, kbd, and samp tags to display preformatted text, format code snippets and user input. |
| |
2.7 |
F |
Create and manipulate ordered (ol), unordered (ul), and definition lists (dl), including nesting. |
| |
2.8 |
A |
Create and manipulate tables (table, tr, td), focusing on headers (th), cell merging (colspan, rowspan), captions (caption), and table attributes (e.g., summary). |
| Section 3: Multimedia and Hyperlinks |
3.1 |
A |
Embed images with img tag (src), focusing on alt text (alt) and basic responsive design attributes (srcset, sizes, width, height). |
| |
3.2 |
A |
Create hyperlinks using the a tag, covering internal and anchor links, external links, email and telephone links, and link-specific attributes (href, target, download, rel, title). |
| |
3.3 |
C |
Embed multimedia content using audio and video elements (src, controls, width, height, autoplay, loop, preload), including considerations for cross-browser compatibility (the source element) and responsiveness (poster, media). |
| |
3.4 |
B |
Design interactive image maps with map and area tags. |
| |
3.5 |
C |
Utilize figure and figcaption for associating media with captions. |
| |
3.6 |
C |
Embed external web content with iframe, including making iframes responsive. |
| |
3.7 |
|
Integrate multimedia elements as clickable links. |
| |
3.8 |
C |
Integrate favicons for brand identity and user recognition. |
| Section 4: Forms and Styling |
4.1 |
A |
Design forms (form, label) with a variety of input types (input, type, name, id, text, email, url, number, password, checkbox, radio, submit, reset, textarea) and understand their specific use cases. |
| |
4.2 |
C |
Discuss form submission methods (GET vs. POST) and their appropriate use cases. |
| |
4.3 |
C |
Implement field grouping with fieldset and legend tags for enhanced form usability and use form-specific attributes to customize form behavior and appearance (value, placeholder, disabled, readonly). |
| |
4.4 |
C |
Use validation techniques and attributes (e.g., required, min, max, maxlength, autocomplete, etc.). |
| |
4.5 |
F |
Create dropdown menus with select and option tags. |
| |
4.6 |
A |
Apply CSS for styling HTML elements, including the use of inline styles (the style attribute) and internal stylesheets (the style element). |
| |
4.7 |
A |
Explore the use of CSS classes (class) and IDs (id) for element styling. |
| |
4.8 |
A |
Incorporate color (color, background-color) and font properties (font-weight, font-size, font-family, font-style) for consistent website styling. |
| |
4.9 |
A |
Differentiate and apply the use of span and div for styling and layout. |
| |
4.10 |
A |
Incorporate basic styling attributes to manipulate the appearance of containers (border, padding, margin). |
| Section 5: Accessibility, Best Practices, and Modern HTML |
5.1 |
A |
Explain the core principles of web accessibility and the importance of following WCAG guidelines. |
| |
5.2 |
F |
Utilize ARIA roles (role), states, and properties (aria-expanded, aria-checked, aria-hidden) to make web content more accessible. |
| |
5.3 |
F |
Implement semantic markup and integrate modern HTML5 structural elements for document organization (header, nav, main, article, section, aside, footer). |
| |
5.4 |
F |
Apply microformats (hCard, vCard), microdata, and schema.org (itemprop, itemscope) for enriched content semantics. |
| |
5.5 |
F |
Understand and apply the basics of HTML APIs (Geolocation, Web Storage) in web applications. |
| |
5.6 |
C |
Utilize SVG for scalable vector graphics, focusing on its benefits and basic syntax. |
| |
5.7 |
C |
Discuss HTML5 development best practices, focusing on code readability and performance. |
| |
5.8 |
C |
Understand and apply the basics of testing web accessibility. |