mirror of https://github.com/github/awesome-copilot.git synced 2026-03-12 20:25:11 +00:00

Files

John Haugabook 8fedf95507 new skill web-coder (#881 )

* new skill web-coder

* codespellrc: add aNULL HTTPS config cipher string

* Apply suggestions from code review

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Apply suggestions from code review

* Apply suggestion from @jhauga

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

2026-03-05 21:43:04 +11:00

10 KiB

Raw Blame History

HTML & Markup Reference

Comprehensive reference for HTML5, markup languages, and document structure.

Core Concepts

HTML (HyperText Markup Language)

The standard markup language for creating web pages and web applications.

Related Terms: HTML5, XHTML, Markup, Semantic HTML

Elements

Building blocks of HTML documents. Each element has opening/closing tags (except void elements).

Common Elements:

<div> - Generic container
<span> - Inline container
<article> - Self-contained content
<section> - Thematic grouping
<nav> - Navigation links
<header> - Introductory content
<footer> - Footer content
<main> - Main content
<aside> - Complementary content

Attributes

Properties that provide additional information about HTML elements.

Common Attributes:

id - Unique identifier
class - CSS class name(s)
src - Source URL for images/scripts
href - Hyperlink reference
alt - Alternative text
title - Advisory title
data-* - Custom data attributes
aria-* - Accessibility attributes

Void Elements

Elements that cannot have content and don't have closing tags.

Examples: <img>, <br>, <hr>, <input>, <meta>, <link>

Semantic HTML

What is Semantic HTML?

HTML that clearly describes its meaning to both the browser and the developer.

Benefits:

Improved accessibility
Better SEO
Easier maintenance
Built-in meaning and structure

Semantic Elements

Element	Purpose	When to Use
`<article>`	Self-contained composition	Blog posts, news articles
`<section>`	Thematic grouping of content	Chapters, tabbed content
`<nav>`	Navigation links	Main menu, breadcrumbs
`<aside>`	Tangential content	Sidebars, related links
`<header>`	Introductory content	Page/section headers
`<footer>`	Footer content	Copyright, contact info
`<main>`	Main content	Primary page content
`<figure>`	Self-contained content	Images with captions
`<figcaption>`	Caption for figure	Image descriptions
`<time>`	Date/time	Publishing dates
`<mark>`	Highlighted text	Search results
`<details>`	Expandable details	Accordions, FAQs
`<summary>`	Summary for details	Accordion headers

Example: Semantic Document Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Semantic Page Example</title>
</head>
<body>
  <header>
    <h1>Site Title</h1>
    <nav aria-label="Main navigation">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <article>
      <header>
        <h2>Article Title</h2>
        <time datetime="2026-03-04">March 4, 2026</time>
      </header>
      <p>Article content goes here...</p>
      <footer>
        <p>Author: John Doe</p>
      </footer>
    </article>
  </main>
  
  <aside>
    <h3>Related Content</h3>
    <ul>
      <li><a href="/related">Related Article</a></li>
    </ul>
  </aside>
  
  <footer>
    <p>&copy; 2026 Company Name</p>
  </footer>
</body>
</html>

Document Structure

Doctype

Declares the document type and HTML version.

<!DOCTYPE html>

Head Section

Contains metadata about the document.

Common Elements:

<meta> - Metadata (charset, viewport, description)
<title> - Page title (shown in browser tab)
<link> - External resources (stylesheets, icons)
<script> - JavaScript files
<style> - Inline CSS

Metadata Examples

<head>
  <!-- Character encoding -->
  <meta charset="UTF-8">
  
  <!-- Responsive viewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- SEO metadata -->
  <meta name="description" content="Page description for search engines">
  <meta name="keywords" content="html, web, development">
  <meta name="author" content="Author Name">
  
  <!-- Open Graph (social media) -->
  <meta property="og:title" content="Page Title">
  <meta property="og:description" content="Page description">
  <meta property="og:image" content="https://example.com/image.jpg">
  
  <!-- Favicon -->
  <link rel="icon" type="image/png" href="/favicon.png">
  
  <!-- Stylesheet -->
  <link rel="stylesheet" href="styles.css">
  
  <!-- Preload critical resources -->
  <link rel="preload" href="critical.css" as="style">
  <link rel="preconnect" href="https://api.example.com">
</head>

Forms and Input

Form Elements

<form action="/submit" method="POST">
  <!-- Text input -->
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  
  <!-- Email input -->
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  
  <!-- Password input -->
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" minlength="8" required>
  
  <!-- Select dropdown -->
  <label for="country">Country:</label>
  <select id="country" name="country">
    <option value="">Select...</option>
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
  </select>
  
  <!-- Textarea -->
  <label for="message">Message:</label>
  <textarea id="message" name="message" rows="4"></textarea>
  
  <!-- Checkbox -->
  <label>
    <input type="checkbox" name="terms" required>
    I agree to the terms
  </label>
  
  <!-- Radio buttons -->
  <fieldset>
    <legend>Choose an option:</legend>
    <label>
      <input type="radio" name="option" value="a">
      Option A
    </label>
    <label>
      <input type="radio" name="option" value="b">
      Option B
    </label>
  </fieldset>
  
  <!-- Submit button -->
  <button type="submit">Submit</button>
</form>

Input Types

Type	Purpose	Example
`text`	Single-line text	`<input type="text">`
`email`	Email address	`<input type="email">`
`password`	Password field	`<input type="password">`
`number`	Numeric input	`<input type="number" min="0" max="100">`
`tel`	Telephone number	`<input type="tel">`
`url`	URL	`<input type="url">`
`date`	Date picker	`<input type="date">`
`time`	Time picker	`<input type="time">`
`file`	File upload	`<input type="file" accept="image/*">`
`checkbox`	Checkbox	`<input type="checkbox">`
`radio`	Radio button	`<input type="radio">`
`range`	Slider	`<input type="range" min="0" max="100">`
`color`	Color picker	`<input type="color">`
`search`	Search field	`<input type="search">`

XML (Extensible Markup Language)

A markup language for encoding documents in a format that is both human-readable and machine-readable.

Key Differences from HTML:

All tags must be properly closed
Tags are case-sensitive
Attributes must be quoted
Custom tag names allowed

XHTML (Extensible HyperText Markup Language)

HTML reformulated as XML. Stricter syntax rules than HTML.

MathML (Mathematical Markup Language)

Markup language for displaying mathematical notation on the web.

<math>
  <mrow>
    <msup>
      <mi>x</mi>
      <mn>2</mn>
    </msup>
    <mo>+</mo>
    <mn>1</mn>
  </mrow>
</math>

SVG (Scalable Vector Graphics)

XML-based markup language for describing two-dimensional vector graphics.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

Character Encoding and References

Character Encoding

Defines how characters are represented as bytes.

UTF-8: Universal character encoding standard (recommended)

<meta charset="UTF-8">

Character References

Ways to represent special characters in HTML.

Named Entities:

< - Less than (<)
> - Greater than (>)
& - Ampersand (&)
" - Quote (")
' - Apostrophe (')
  - Non-breaking space

Numeric Entities:

< - Less than (<)
€ - Euro (€)

Block vs Inline Content

Block-Level Content

Elements that create a "block" in the layout, starting on a new line.

Examples: <div>, <p>, <h1>-<h6>, <article>, <section>, <header>, <footer>, <nav>, <aside>, <ul>, <ol>, <li>

Inline-Level Content

Elements that don't start on a new line and only take up as much width as necessary.

Examples: <span>, <a>, <strong>, <em>, <img>, <code>, <abbr>, <cite>

Best Practices

Do's

✅ Use semantic HTML elements
✅ Include proper document structure (DOCTYPE, html, head, body)
✅ Set character encoding to UTF-8
✅ Use descriptive alt attributes for images
✅ Associate labels with form inputs
✅ Use heading hierarchy properly (h1 → h2 → h3)
✅ Validate HTML with W3C validator
✅ Use proper ARIA roles when needed
✅ Include meta viewport for responsive design

Don'ts

❌ Use <div> when a semantic element exists
❌ Skip heading levels (h1 → h3)
❌ Use tables for layout
❌ Forget to close tags (except void elements)
❌ Use inline styles extensively
❌ Omit alt attribute on images
❌ Create forms without labels
❌ Use deprecated elements (<font>, <center>, <blink>)

Glossary Terms from MDN

Key Terms Covered:

Abstraction
Accessibility tree
Accessible description
Accessible name
Attribute
Block-level content
Breadcrumb
Browsing context
Character
Character encoding
Character reference
Character set
Doctype
Document environment
Element
Entity
Head
HTML
HTML5
Hyperlink
Hypertext
Inline-level content
Markup
MathML
Metadata
Semantics
SVG
Tag
Void element
XHTML
XML

10 KiB Raw Blame History