mirror of
https://github.com/github/awesome-copilot.git
synced 2026-03-12 20:25:11 +00:00
8fedf95507
* 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>
388 lines
10 KiB
Markdown
388 lines
10 KiB
Markdown
# 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
|
|
|
|
```html
|
|
<!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>© 2026 Company Name</p>
|
|
</footer>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
## Document Structure
|
|
|
|
### Doctype
|
|
Declares the document type and HTML version.
|
|
|
|
```html
|
|
<!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
|
|
|
|
```html
|
|
<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
|
|
|
|
```html
|
|
<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">` |
|
|
|
|
## Related Markup Languages
|
|
|
|
### 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.
|
|
|
|
```html
|
|
<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.
|
|
|
|
```html
|
|
<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)
|
|
|
|
```html
|
|
<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
|
|
- `©` - Copyright (©)
|
|
|
|
**Numeric Entities**:
|
|
- `<` - Less than (<)
|
|
- `©` - Copyright (©)
|
|
- `€` - 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
|
|
|
|
## Additional Resources
|
|
|
|
- [MDN HTML Reference](https://developer.mozilla.org/en-US/docs/Web/HTML)
|
|
- [W3C HTML Specification](https://html.spec.whatwg.org/)
|
|
- [HTML5 Doctor](http://html5doctor.com/)
|
|
- [W3C Markup Validation Service](https://validator.w3.org/)
|