html_examples

HTML Examples Showcase

This section provides quick links to examples demonstrating various HTML features and techniques. Explore these to see HTML in action.

HTML Basics

Basic HTML Document Structure HTML Headings (h1-h6) HTML Paragraphs (<p>) HTML Links (<a>) HTML Images (<img>)

Core examples covering fundamental HTML elements.

HTML Attributes

The title attribute (tooltip) The href attribute (link destination) The width and height attributes (image dimensions - consider CSS) The alt attribute (image alternative text - crucial for accessibility) Boolean attributes (e.g., disabled, checked)

Examples demonstrating how attributes modify HTML elements. Note: While boolean attributes can be written without values (e.g., <input disabled>), quoting attribute values (e.g., href="...") is standard practice.

Document Structure

HTML Headings (<h1> to <h6>) Horizontal Rules (<hr>) The <head> Element (metadata, title, links to CSS/JS)

Structuring content logically within an HTML document.

Text Formatting

Paragraphs (<p>) Line Breaks (<br>) Preformatted Text (<pre>) Controlling whitespace

Managing text flow and presentation.

Styling HTML (Introduction to CSS)

Inline Styles (using the style attribute - use sparingly) Internal CSS (using <style> tag in <head>) External CSS (linking a .css file - recommended) Styling: Background Color, Text Color, Fonts, Text Size, Text Alignment

Illustrating different ways to apply CSS for styling. External CSS is the best practice for maintainability.

Semantic Text Formatting

Bold Text: ** (non-semantic) vs ** (semantic importance) Italic Text: <i> (non-semantic) vs <em> (semantic emphasis) Small Text (<small>) Marked/Highlighted Text (<mark>) Deleted Text (<del>) Inserted Text (<ins>) Subscript (<sub>) Superscript (<sup>)

Using tags that convey meaning (semantic) vs. just visual styling.

Quotations, Citations, and Definitions

Short Inline Quotations (<q>) Longer Block Quotations (<blockquote>) Contact Information (<address>) Abbreviations and Acronyms (<abbr> with title attribute) Work Titles (<cite>) Bi-Directional Override (<bdo>)

Marking up specific types of textual content.

Computer Code Elements

Keyboard Input (<kbd>) Sample Output (<samp>) Code Snippets (``` - often used with <pre>) Variables (<var>)

Representing computer-related text semantically.

HTML Comments

Adding Comments (<!-- ... -->) for explanations or debugging.

Using comments effectively. Note: Conditional comments for IE are obsolete.

HTML and CSS Integration

Inline, Internal, External CSS recap CSS Selectors: id (#myId) and class (.myClass) CSS Box Model: Borders, Padding, Margin Full CSS Demo

Deeper dive into how HTML structure works with CSS selectors and the box model.

HTML Links (<a>)

Absolute vs. Relative URLs Styling Links (color, text-decoration) Link Targets (target="_blank" to open in new tab) Image Links Bookmark Links (linking within the same page using IDs) Mailto Links (`href=“mailto:…”)

Creating hyperlinks to navigate between pages or resources.

HTML Images (<img>, <picture>)

Basic Image Embedding (src, alt) Image Dimensions (width, height - CSS preferred for responsiveness) Images in Folders Handling Broken Links (importance of alt text) Linking to External Images Image Maps (client-side <map> - less common now) Responsive Images using <picture> and srcset attribute.

Embedding and managing images, including modern responsive techniques.

HTML Tables (<table>)

Basic Table Structure (<table>, <tr>, <td>, <th>) Table Borders (CSS) Cell Padding & Spacing (CSS padding, border-spacing) Table Headers (<thead>, <th>, scope attribute) Table Body (<tbody>) Table Footer (<tfoot>) Captions (<caption>) Spanning Columns (colspan) and Rows (rowspan) Styling Tables with CSS (classes, IDs)

Structuring and displaying tabular data. Use tables for data, not for page layout.

HTML Lists

Unordered Lists (<ul>, <li>, CSS list-style-type) Ordered Lists (<ol>, <li>, type, start attributes) Description Lists (<dl>, <dt>, <dd>) Nested Lists Styling Lists (e.g., horizontal navigation menus with CSS)

Organizing content into lists.

Block vs. Inline Elements

Understanding Block-level elements (e.g., <div>, <p>, <h1>) Understanding Inline elements (e.g., <span>, <a>, <img>) Using <div> for grouping block content Using <span> for styling inline content

Distinguishing between element display types.

HTML Classes and IDs

Using the class attribute (for multiple elements) Using the id attribute (for unique elements) Styling with Classes and IDs in CSS Using Classes and IDs for JavaScript hooks

Applying identifiers for styling and scripting.

HTML Layout Techniques

Layout using Semantic Elements (<header>, <nav>, <main>, <aside>, <footer>) CSS Flexbox for 1D layouts (e.g., navigation, aligning items) CSS Grid for 2D layouts (e.g., page structure, complex grids) Layout using <table> (discouraged - only for tabular data)

Structuring web page layouts using modern CSS (Flexbox, Grid) and semantic HTML.

HTML Iframes (<iframe>)

Embedding another HTML page within the current page.

Using inline frames.

HTML Head Elements (<head>)

The <title> element The <style> element (Internal CSS) The <link> element (External CSS, favicons) The <meta> element (charset, viewport, description) The <script> element (JavaScript) The <base> element (setting base URL)

Understanding the role of elements within the <head>.

HTML Scripts (<script>)

Embedding JavaScript (inline vs. external .js file - external recommended) The <noscript> tag (fallback content)

Integrating JavaScript into HTML.

HTML Forms (<form>)

Creating Forms (<form>, action, method) Text Input (<input type="text">, <label>) Password Input (<input type="password">) Radio Buttons (<input type="radio">, name attribute) Checkboxes (<input type="checkbox">) Submit Button (<input type="submit">, <button type="submit">) Grouping Form Data (<fieldset>, <legend>) Associating Labels (<label for="..."> and matching id)

Building interactive forms for user input.

More Form Elements

Dropdown Lists (<select>, <option>, <optgroup>) Text Areas (<textarea>) Buttons (<button type="button|submit|reset">) Datalists (<datalist> for input suggestions) Output Element (<output> for calculation results)

Exploring additional form controls. Note: <keygen> is deprecated and removed from web standards.

HTML Input Types

text, password, radio, checkbox, button, submit Modern Types: number, date, color, range, month, week, time, datetime-local, email, search, tel, url, file

Utilizing specialized input types for better UI and validation.

HTML Input Attributes

Validation: required, pattern, min, max, step, minlength, maxlength UI/Behavior: placeholder, readonly, disabled, autofocus, multiple (for email, file) Form Association: form, formaction, formenctype, formmethod, formnovalidate, formtarget Other: list (for <datalist>), autocomplete

Enhancing input fields with attributes for validation and user experience. novalidate on the <form> disables browser validation.

HTML Graphics (<canvas>, <svg>)

Canvas: Drawing shapes, text, gradients, images using JavaScript APIs. SVG: Defining vector graphics (circles, rectangles, paths) using XML markup.

Creating graphics directly within HTML.

HTML Multimedia (<audio>, <video>)

Embedding Audio (<audio>, <source>, controls, autoplay, loop, muted) Embedding Video (<video>, <source>, controls, autoplay, loop, muted, poster) Providing captions/subtitles (<track>)

Integrating audio and video content.

Advanced HTML5 APIs

Geolocation API (getting user location) Web Storage (Local & Session Storage) Web Workers (background JavaScript execution) Server-Sent Events (SSE - server push) Drag and Drop API

Examples of powerful browser APIs interacting with HTML. Note: Application Cache is deprecated; use Service Workers instead.