HTML Basics to Advanced
Shared 12/27/2025•52 views
1. Core HTML Document Structure & Best Practices DOCTYPE Declaration: Always the first line. Ensures browser renders in standards mode. <!DOCTYPE html> Root Element: ` ` with `lang` attribute for accessibility and SEO. <html lang="en"> </html> Head Section (`<head>`): Crucial for metadata, SEO, performance, and responsiveness. `<meta charset="UTF-8">`: Essential for character encoding (first meta tag). `<meta name="viewport" content="width=device-width, initial-scale=1.0">`: Critical for responsive design on all devices. `<title>`: Unique, descriptive, and concise title for each page (SEO, user experience). `<meta name="description" content="...">`: Short, accurate summary for search engines. `<link rel="stylesheet" href="style.css">`: Link external CSS (preferably in `<head>`). `<script src="script.js" defer></script>`: Link external JavaScript. `defer` attribute ensures HTML parsing isn't blocked. `<link rel="icon" href="favicon.ico">`: Favicon for browser tabs. `<meta name="robots" content="index, follow">`: Control search engine crawling. Open Graph (OG) Tags: For social media sharing (e.g., `og:title`, `og:image`). <meta property="og:title" content="Page Title"> <meta property="og:image" content="image.jpg"> Body Section (`<body>`): Contains all visible content. 2. Semantic HTML5: Structure & Meaning Using semantic tags is crucial for accessibility, SEO, and maintainability. Document Structure: `<header>`: Introductory content, usually contains navigation, logo, headings. `<nav>`: Group of navigation links. `<main>`: Dominant content unique to the document. Only one per page. `<article>`: Independent, self-contained content (e.g., blog post, news story). `<section>`: Generic standalone section, typically with a heading. Thematic grouping. `<aside>`: Content indirectly related to the main content (e.g., sidebar, pull quote). `<footer>`: Concluding content, often includes copyright, contact info, related links. `<address>`: Contact information for the nearest `<article>` or `<body>`. Text Semantics: `<h1>` to `<h6>`: Headings (use sequentially for document outline). One `<h1>` per page is a best practice for SEO. `<p>`: Paragraphs. `<strong>`: Indicates strong importance (semantic bold). `<em>`: Indicates emphasis (semantic italics). `<mark>`: Highlighted text. `<small>`: Side comments, disclaimers, copyright. `<blockquote>`: Section quoted from another source. `<cite>`: Title of a creative work. `<q>`: Short inline quotation. `<abbr>`: Abbreviation or acronym. `<time>`: Represents a specific period in time. Published on <time datetime="2023-10-26">October 26, 2023</time>. `<code>`: Inline code snippet. `<pre>`: Preformatted text, preserves spaces and line breaks. Often used with `<code>`. Lists: `<ul>` (unordered), `<ol>` (ordered), `<li>` (list item). Use `<ol type="..." start="...">` for specific numbering. `<dl>`, `<dt>`, `<dd>`: Description lists (e.g., glossary). Figures: `<figure>`, `<figcaption>`: For self-contained content like images, diagrams, code blocks with a caption. <figure> <img src="graph.png" alt="Sales Growth"> <figcaption>Annual sales growth over 5 years.</figcaption> </figure> 3. Links (`<a>`) & Images (`<img>`) Hyperlink (`<a>`): `href`: Destination URL. `target="_blank"`: Opens in new tab (use `rel="noopener noreferrer"` for security). `title`: Tooltip on hover (also good for accessibility). `rel="nofollow"`: Hint to search engines not to follow the link (e.g., user-generated content). SEO: Use descriptive link text, not "click here". <a href="page.html" target="_blank" rel="noopener noreferrer">Learn More</a> Image (`<img>`): `src`: Image path. `alt`: Crucial for accessibility and SEO. Describes image content for screen readers and when image fails to load. `width`, `height`: Specify dimensions to prevent layout shifts (CLS). `loading="lazy"`: Defer loading of off-screen images for performance. `srcset`, `sizes`: For responsive images (serving different images based on viewport size/resolution). <img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" sizes="(max-width: 600px) 480px, 800px" src="medium.jpg" alt="Description" loading="lazy"> `<picture>`: For more complex art direction, using different image formats (e.g., WebP, JPEG). <picture> <source srcset="img.webp" type="image/webp"> <source srcset="img.jpg" type="image/jpeg"> <img src="img.jpg" alt="Description"> </picture> 4. Tables (`<table>`) For tabular data, not layout. Always use semantic elements for accessibility. `<table>`: Main container. `<caption>`: Table title (for accessibility). `<thead>`, `<tbody>`, `<tfoot>`: Semantic grouping of rows. `<tr>`: Table row. `<th>`: Table header cell. `scope="col"` or `scope="row"`: Crucial for screen readers to associate header with data cells. `<td>`: Table data cell. `colspan`, `rowspan`: Merge cells. <table> <caption>Quarterly Sales Report</caption> <thead> <tr> <th scope="col">Product</th> <th scope="col">Q1</th> <th scope="col">Q2</th> </tr> </thead> <tbody> <tr> <th scope="row">Widget A</th> <td>$1000</td> <td>$1200</td> </tr> </tbody> </table> 5. Forms (`<form>`) & User Input Designing accessible and user-friendly forms is critical. `<form action="/submit" method="post">`: `action` (where data goes), `method` (`GET`/`POST`). `<label for="id">`: Always associate labels with inputs using `for` and `id` attributes for accessibility. `<input>`: `type`: `text`, `password`, `email`, `number`, `date`, `checkbox`, `radio`, `submit`, `reset`, `file`, `hidden`, `search`, `url`, `tel`, `color`. `name`: Used to identify data when submitted. `value`: Initial value. `placeholder`: Hint text. `required`, `readonly`, `disabled`: Validation and state. `autocomplete`: Browser auto-fill suggestions (e.g., `autocomplete="email"`). `pattern`: Regex for input validation. `<textarea>`: Multi-line text input (`rows`, `cols`). `<select>`, `<option>`, `<optgroup>`: Dropdown lists. `selected`, `disabled`, `multiple` attributes. `<button>`: `type="submit"|"reset"|"button"`. Prefer `<button>` over `<input type="button">`. `<fieldset>`, `<legend>`: Group related form elements with a title. Essential for complex forms and accessibility. `<datalist>`: Provides a list of pre-defined options for an `<input>`. <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> </datalist> 6. Media (`<audio>`, `<video>`) & Embedding (`<iframe>`) `<audio>`, `<video>`: `src`: Path to media file. `controls`: Displays default browser controls. `autoplay`, `loop`, `muted`, `preload`. `poster`: Image to show before video plays. `<source>`: Provide multiple formats for browser compatibility (e.g., MP4, WebM, Ogg). `<track>`: For subtitles/captions (`kind="captions"`, `srclang`, `label`). Accessibility! `<iframe>`: Embed another HTML document. `src`: URL of content to embed. `width`, `height`: Dimensions. `sandbox`: Restrict capabilities of embedded content for security. `loading="lazy"`: Defer loading of off-screen iframes. Security: Be mindful of cross-site scripting (XSS) risks. `<canvas>`: For drawing graphics via JavaScript (e.g., charts, games). `<svg>`: Scalable Vector Graphics. Embed directly or via `<img>`. Excellent for logos, icons. 7. Web Accessibility (A11y) - ARIA & Best Practices Making web content accessible to everyone, including users with disabilities. Semantic HTML First: Correct use of `<button>`, `<a>`, `<label>`, `<nav>`, etc., provides inherent accessibility. ARIA (Accessible Rich Internet Applications): Used when native HTML isn't sufficient for complex UI components. `role`: Defines the type of UI element (e.g., `role="button"`, `role="alert"`, `role="dialog"`). `aria-label`: Provides a concise, accessible name for an element when no visible label exists. `aria-labelledby`: References an element that serves as the label for the current element. `aria-describedby`: References an element that provides a description for the current element. `aria-hidden="true"`: Hides an element from assistive technologies. `aria-expanded="true/false"`: Indicates if a control (e.g., accordion header) is expanded or collapsed. `aria-controls`: Identifies the element(s) whose contents or presence are controlled by the current element. `aria-live="polite/assertive"`: Indicates that an element's content may change and should be announced by screen readers. `aria-current="page/step/location"`: Indicates the current item within a set of related items. Keyboard Navigation: Ensure all interactive elements are reachable and operable via keyboard (`tabindex`). Color Contrast: Ensure sufficient contrast between text and background. Transcripts/Captions: Provide for audio/video content. Testing: Use screen readers (JAWS, NVDA, VoiceOver), keyboard navigation, and accessibility checkers. 8. Performance & SEO Considerations in HTML Minimize DOM Size: Fewer elements, faster rendering. Critical CSS: Inline essential CSS in `<head>` for above-the-fold content (`<style>`). Defer/Async JavaScript: `<script defer>`: Executes script after HTML parsing is complete. `<script async>`: Executes script as soon as it's downloaded, without blocking HTML parsing. Image Optimization: Use `srcset`, `sizes`, `<picture>`, `loading="lazy"`, and optimized formats (WebP). Preload/Preconnect: `<link rel="preload" href="font.woff2" as="font" crossorigin>`: Fetch resources early. `<link rel="preconnect" href="https://example.com">`: Establish early connection to origin. Semantic HTML: Improves SEO by providing clear structure and meaning to content for search engine crawlers. Descriptive `<title>` and `<meta name="description">`: Key for search result snippets. Proper Heading Hierarchy (`<h1>` to `<h6>`): Helps search engines understand content structure. Meaningful `alt` attributes for images: Improves image search and overall SEO. 9. Global Attributes & HTML5 APIs Global Attributes: `id`: Unique identifier (for CSS, JS, linking). `class`: Space-separated list of classes (for CSS, JS). `style`: Inline CSS (generally avoid for maintainability). `data-*`: Custom data attributes for storing application-specific data. <div data-product-id="123" data-category="electronics"></div> `title`: Advisory information (tooltip). `lang`: Language of element content. `dir`: Text direction (`ltr`, `rtl`, `auto`). `tabindex`: Order of element in keyboard navigation. `contenteditable="true"`: Allows user to edit element content directly in the browser. `hidden`: Hides an element visually and from screen readers. `draggable="true"`: Makes an element draggable (used with Drag and Drop API). HTML5 APIs (Brief Mention): Geolocation API: Access user's location. Web Storage API: `localStorage` and `sessionStorage` for client-side data storage. Drag and Drop API: Enable drag-and-drop functionality. History API: Manipulate browser history (`pushState`, `replaceState`). Web Workers API: Run scripts in background threads. Service Workers API: For offline capabilities and push notifications. 10. Character Entities & Deprecated Elements Character Entities: Use for special characters to ensure correct rendering. `<` ($<$) `>` ($>$) `&` ($&$) `"` ($"$) `'` ($'$) ` ` (non-breaking space) `©` (©) Deprecated/Obsolete Elements (Avoid): `<font>`, `<center>`, `<big>`: Use CSS for styling. `<frame>`, `<frameset>`, `<noframes>`: Use `<iframe>` or modern layout techniques. `<acronym>`: Use `<abbr>`. `<strike>`: Use `<del>` or CSS `text-decoration`.
