Responsive Images
Responsive images help browsers choose appropriate sizes. Use srcset and sizes for width-based options and keep intrinsic width and height to reduce layout shifts.
Details and Disclosure Widgets
The details and summary elements create a native expandable section without JavaScript. They work well for short FAQs and optional explanations.
HTML Metadata and SEO
A descriptive title, meta description, language declaration, and clear headings help browsers and search engines understand a page. Metadata does not guarantee rankings.
HTML Final Project: Portfolio
Combine semantic sections, navigation, links, images, lists, and a contact form to create a personal portfolio. Keep the page readable without CSS or JavaScript.
HTML Entities and Special Characters
Reserved characters such as < and & need escaping in HTML text. Use entities like <, >, and & to display them literally.
Accessibility Basics
Accessible HTML uses meaningful headings, labels, descriptive links, and keyboard-operable controls. Prefer native HTML elements before adding ARIA roles.
Text Formatting
Strong indicates importance and em indicates emphasis. Use mark for highlighted text and small for side notes; avoid choosing semantic elements only for appearance.
Links and Navigation
The a element creates hyperlinks. Use meaningful link text; for external links opened in a new tab, include rel=”noopener noreferrer”.
Images and Alternative Text
The img element embeds an image. The alt attribute describes meaningful images for screen-reader users and appears when an image cannot load.
Ordered and Unordered Lists
Use ul when order does not matter, ol when sequence matters, and li for each list item. Lists make grouped information easier to scan.
HTML Tables
Tables represent tabular data, not page layout. Use caption, th, and scope to help readers understand relationships between cells.
Forms and Input Fields
Forms collect user input. Labels should be associated with inputs using for and id, and each field should have a name for submission.