Copy the table below into your own journal. Next to each objective, give yourself a “confidence score” that represents how confident you feel that you will get a question about that topic right. Use a letter grade scale (A means you are very confident you will get a question about that topic correct, E means that you are very confident you will get a question about that topic wrong).
This is a completion activity and I won’t use your confidence scores to calculate any grade - so feel free to be honest!
We’ll use this to inform our study plan for the test.
| Section | Objective | Confidence | Description |
|---|---|---|---|
| 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 | B | Identify and correctly use basic HTML entities. | |
| 1.4 | B | 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 | A | Implement text formatting tags such as strong, em, u, del, sup, sub, and mark. |
| 2.2 | A | Demonstrate the use of headings (h1-h6) and their importance in structuring content and enhancing accessibility. | |
| 2.3 | A | 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 | B | Use the blockquote, q, cite, and abbr tags appropriately. | |
| 2.6 | B | Employ code, pre, kbd, and samp tags to display preformatted text, format code snippets and user input. | |
| 2.7 | A | Create and manipulate ordered (ol), unordered (ul), and definition lists (dl), including nesting. | |
| 2.8 | B | 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 | B | Embed images with img tag (src), focusing on alt text (alt) and basic responsive design attributes (srcset, sizes, width, height). |
| 3.2 | B | 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 | B | 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 | A | Utilize figure and figcaption for associating media with captions. | |
| 3.6 | B | Embed external web content with iframe, including making iframes responsive. | |
| 3.7 | B | Integrate multimedia elements as clickable links. | |
| 3.8 | A | 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 | A | Discuss form submission methods (GET vs. POST) and their appropriate use cases. | |
| 4.3 | A | 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 | A | Use validation techniques and attributes (e.g., required, min, max, maxlength, autocomplete, etc.). | |
| 4.5 | A | 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 | B | 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 | B | Explain the core principles of web accessibility and the importance of following WCAG guidelines. |
| 5.2 | C | Utilize ARIA roles (role), states, and properties (aria-expanded, aria-checked, aria-hidden) to make web content more accessible. | |
| 5.3 | B | Implement semantic markup and integrate modern HTML5 structural elements for document organization (header, nav, main, article, section, aside, footer). | |
| 5.4 | C | Apply microformats (hCard, vCard), microdata, and schema.org (itemprop, itemscope) for enriched content semantics. | |
| 5.5 | C | Understand and apply the basics of HTML APIs (Geolocation, Web Storage) in web applications. | |
| 5.6 | B | Utilize SVG for scalable vector graphics, focusing on its benefits and basic syntax. | |
| 5.7 | A | Discuss HTML5 development best practices, focusing on code readability and performance. | |
| 5.8 | A | Understand and apply the basics of testing web accessibility. |
<code>, <pre>, <kbd>, and <samp> for Preformatted Text and Code SnippetsToday, I explored HTML elements that help display code snippets, preformatted text, user input, and system output. These tags are especially useful when creating technical documentation, coding tutorials, or interactive web pages that involve user instructions.
Here’s a breakdown of what I learned:
<code>: Used for displaying inline code snippets. It applies a monospace font to help differentiate code from regular text.<pre>: Preserves whitespace and line breaks, making it perfect for displaying blocks of code exactly as written.<kbd>: Represents user keyboard input, which is useful for writing tutorials that instruct users to press specific keys.<samp>: Displays system output, making it ideal for showing what a program prints to the console.To get hands-on experience, I built a simple webpage that demonstrates these elements in action. I wrote an HTML file where:
<pre> block to maintain formatting.<kbd>.<samp>.This exercise helped me understand how these tags contribute to better readability and usability in web content, especially for technical writing.
Before this practice, I had seen <code> and <pre> used in documentation but never fully explored their differences. Now, I see how they serve different purposes—<pre> preserves formatting, while <code> is more suited for inline use. Adding <kbd> and <samp> to my toolkit will be helpful when writing instructions for users.
One challenge I faced was making the <code> snippets stand out visually. To fix this, I added CSS to style them with a bold, dark red color. This made them easier to distinguish from regular text.
This practice reinforced my ability to present technical content effectively. I feel much more confident incorporating these elements into my future web projects.
Confidence Score Before: 5/10
Confidence Score After: 8/10
<map> and <area>I also worked on designing interactive image maps using the <map> and <area> elements. Image maps allow users to click on different sections of an image and be redirected to various links or perform other actions. This is useful for navigation menus, infographics, or educational diagrams.
Here’s how these elements work:
<map>: Groups multiple clickable areas on an image.<area>: Defines specific clickable regions within the image. It requires attributes like shape, coords, and href to function properly.There are different shape values that can be used with <area>:
rect (rectangle): Requires four coordinates (x1, y1, x2, y2).circle: Requires three values (center x, center y, radius).poly (polygon): Uses multiple coordinates to define an irregular shape.For my practice project, I created an image map where users can click on different sections of an image to navigate to different pages. I defined one rectangular area and one circular area to see how each works.
One challenge was figuring out the exact coordinates for the <area> tags. I used an online image map generator to simplify the process. I also made sure to add alt attributes for accessibility, which is an important step I initially overlooked.
Before this practice, I didn’t realize how powerful <map> and <area> could be for interactive web design. I had assumed that most clickable images were created using JavaScript or CSS, but now I see that HTML alone can handle some of these tasks efficiently.
One limitation is that image maps rely on pixel-based coordinates, which means they don’t always scale well on responsive websites. If I were to use this in a real project, I would research ways to make it work with flexible layouts, such as using percentage-based coordinates or combining it with JavaScript.
Overall, I feel much more comfortable using <map> and <area>, and I can see how they might be useful in future projects.
Confidence Score Before: 4/10
Confidence Score After: 7/10