Document Structure

Basic Document Template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page Title</title>
</head>
<body>
    Content goes here
</body>
</html>

<!DOCTYPE html>: Document type declaration for HTML5
<html>: Root element of an HTML page
<head>: Contains metadata and links to scripts/stylesheets
<body>: Contains the visible page content

Text Formatting

Headings

Heading 1 - <h1>

Heading 2 - <h2>

Heading 3 - <h3>

Heading 4 - <h4>

Heading 5 - <h5>

Heading 6 - <h6>

Paragraphs & Text Elements

<p> - Paragraph element for blocks of text

<br> - Line break (self-closing)

<hr> - Horizontal rule / thematic break:

Inline Text Formatting

<strong> - Strong importance (bold)

<b> - Bold text (stylistic)

<em> - Emphasized text (italic)

<i> - Italic text (stylistic)

<mark> - Highlighted text

<small> - Smaller text

~~<del>~~ - Deleted text (strikethrough)

<ins> - Inserted text (underlined)

_<sub> - Subscript

^<sup> - Superscript

<code> - Inline code

<kbd> - Keyboard input

<samp> - Sample output

<var> - Variable

<abbr> - Abbreviation with title attribute

<cite> - Citation

<q> - Inline quotation

<dfn> - Definition term

<time> - Date/time

Block-level Text Elements

<blockquote> - Block quotation for longer quotes

<pre> - Preformatted text
    Preserves    spaces
    and line breaks

<address>
Contact information
123 Main St, City, State 12345

Lists

Unordered List - <ul>

List item - <li>
Another item
Nested list:
- Nested item
- Another nested item

Ordered List - <ol>

First item
Second item
Third item

With type attribute:

Type A (uppercase letters)
Type a (lowercase letters)

Type I (uppercase Roman numerals)
Type i (lowercase Roman numerals)

Description List - <dl>

<dt> - Term: <dd> - Description
HTML: HyperText Markup Language
CSS: Cascading Style Sheets

Links & Navigation

Anchor Tag - <a>

<a href="url"> - External link

<a href="#id"> - Internal link to ID

<a href="mailto:"> - Email link

<a href="tel:"> - Phone link

<a target="_blank"> - Open in new tab

<a download> - Download link

Media Elements

Images - <img>

<img src="image.jpg" alt="Description" width="300" height="200">

Attributes: src, alt, width, height, loading, srcset

Picture Element

<picture>
    <source media="(min-width: 800px)" srcset="large.jpg">
    <source media="(min-width: 400px)" srcset="medium.jpg">
    <img src="small.jpg" alt="Description">
</picture>

Audio - <audio>

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Your browser does not support audio.
</audio>

Attributes: controls, autoplay, loop, muted, preload

Video - <video>

<video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <track src="subtitles.vtt" kind="subtitles" srclang="en">
    Your browser does not support video.
</video>

Attributes: controls, autoplay, loop, muted, poster, width, height

Embedded Content

<iframe> - Embedded frame

<iframe src="page.html" width="500" height="300"></iframe>

<embed> - Embedded external content

<embed src="file.pdf" width="500" height="600">

<object> - External resource

<object data="file.pdf" type="application/pdf"></object>

SVG & Canvas

<svg> - Scalable Vector Graphics container

<canvas> - Graphics container for JavaScript drawing

Figure & Caption

Code example or image

<figcaption> - Caption for <figure>

Tables

Table Structure

<caption> - Table caption
<th> Header 1	<th> Header 2	<th> Header 3
<td> Data 1	Data 2	Data 3
Data 4	Data 5	Data 6
<tfoot> Footer with colspan="3"

Table Elements:

<table> - Table container
<caption> - Table title
<thead> - Table header section
<tbody> - Table body section
<tfoot> - Table footer section
<tr> - Table row
<th> - Table header cell
<td> - Table data cell
<col> - Column properties
<colgroup> - Group of columns

Forms & Input Elements

Form Element

<legend> - Fieldset Title <label> Text Input: Email: Password: Number: Date: Time: Datetime-local: Month: Week: Color: Range: Tel: URL: Search: File: Hidden input:

Checkboxes:

Option 1 (checked) Option 2

Radio buttons:

Choice A Choice B Select dropdown: Textarea: Datalist:

Form Attributes:

action - URL to send form data
method - GET or POST
enctype - multipart/form-data for file uploads
target - _blank, _self, etc.
autocomplete - on or off
novalidate - disable validation

Input Attributes:

required - field must be filled
readonly - cannot be edited
disabled - grayed out
placeholder - hint text
pattern - regex validation
min, max - range limits
maxlength - character limit
multiple - allow multiple values
autofocus - auto-focus on page load

Output Element

<output> - Result of a calculation

Progress & Meter

Progress: 70%

Meter: 60%

Semantic HTML5 Elements

Page Structure

<header>: Introductory content or navigation
<nav>: Navigation links section
<main>: Main content of the document (only one per page)
<article>: Self-contained content (blog post, article)
<section>: Thematic grouping of content
<aside>: Sidebar or tangentially related content
<footer>: Footer information

Content Elements

<details> & <summary>: Disclosure widget for showing/hiding content

Click to expand

Hidden content revealed when expanded

<dialog>: Dialog box or modal

Metadata & Document Head

Basic Meta Tags

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Page description for search engines">
<meta name="keywords" content="keyword1, keyword2, keyword3">
<meta name="author" content="Author Name">
<meta name="robots" content="index, follow">
<meta http-equiv="refresh" content="30">
<meta name="theme-color" content="#ffffff">

Open Graph Meta Tags (Facebook, LinkedIn, etc.)

<!-- Essential Open Graph Tags -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page">
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page description">
<meta property="og:image" content="https://example.com/image.jpg">

<!-- Additional Open Graph Tags -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<meta property="og:video" content="https://example.com/video.mp4">

<!-- For Articles -->
<meta property="article:published_time" content="2026-02-10T12:00:00Z">
<meta property="article:author" content="Author Name">
<meta property="article:section" content="Technology">
<meta property="article:tag" content="HTML">

Recommended Image Size: 1200x630 pixels for best display on social media

Twitter Card Meta Tags

<!-- Twitter Card Type -->
<meta name="twitter:card" content="summary_large_image">
<!-- Options: summary, summary_large_image, app, player -->

<!-- Twitter Content -->
<meta name="twitter:url" content="https://example.com/page">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description">
<meta name="twitter:image" content="https://example.com/image.jpg">

<!-- Twitter Account Attribution -->
<meta name="twitter:site" content="@username">
<meta name="twitter:creator" content="@author">

<!-- Twitter Image Alt Text -->
<meta name="twitter:image:alt" content="Description of image">

JSON-LD Structured Data

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Article Title",
  "description": "Article description",
  "author": {
    "@type": "Person",
    "name": "Author Name"
  },
  "datePublished": "2026-02-10",
  "dateModified": "2026-02-10",
  "publisher": {
    "@type": "Organization",
    "name": "Publisher Name",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  },
  "image": "https://example.com/image.jpg"
}
</script>

Common @type values: Article, BlogPosting, Product, Event, Organization, Person, WebSite

Social Media Image Dimensions

Platform	Recommended Size	Aspect Ratio
Facebook/LinkedIn	1200 x 630 px	1.91:1
Twitter Large Image	1200 x 628 px	1.91:1
Twitter Summary	120 x 120 px	1:1
Pinterest	1000 x 1500 px	2:3
Instagram	1080 x 1080 px	1:1

Metadata Best Practices

Always include og:title, og:description, og:image, and og:url
Keep titles under 60 characters for best display
Keep descriptions between 150-160 characters
Use absolute URLs for all og:image and twitter:image tags
Images should be at least 600x315 pixels (1200x630 recommended)
Test your meta tags using Facebook Debugger and Twitter Card Validator
Use unique descriptions for each page
Include structured data (JSON-LD) for rich search results

Link Relations

<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico">
<link rel="canonical" href="https://example.com/page">
<link rel="alternate" hreflang="es" href="https://example.com/es/">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://example.com">

Script & Style

<script src="script.js"></script>
<script defer src="deferred.js"></script>
<script async src="async.js"></script>
<script type="module" src="module.js"></script>

<style>
    body { margin: 0; }
</style>

<noscript>JavaScript is disabled</noscript>

Base URL

<base href="https://example.com/" target="_blank">

Interactive Elements

Details & Summary

More Information

Additional content that can be shown or hidden

Data Attributes

Elements can have custom data-* attributes

<div data-user-id="123" data-role="admin">...</div>

Global Attributes

These attributes can be used on any HTML element:

id: Unique identifier for the element
class: One or more class names for styling
style: Inline CSS styles
title: Advisory information (tooltip)
lang: Language of the element's content
dir: Text direction (ltr, rtl, auto)
hidden: Hide the element
tabindex: Tab order for keyboard navigation
accesskey: Keyboard shortcut
contenteditable: Whether content is editable (true/false)
draggable: Whether element is draggable (true/false)
spellcheck: Enable spell checking (true/false)
translate: Whether to translate content (yes/no)
data-*: Custom data attributes

HTML Entities (Special Characters)

Character	Entity Name	Entity Number
<	<	<
>	>	>
&	&	&
"	"	"
'	'	'

©	©	©
®	®	®
™	™	™
€	€	€

Obsolete/Deprecated Elements

Avoid using these elements:

<center> - Use CSS text-align instead
<font> - Use CSS font properties instead
<marquee> - Use CSS animations instead
<blink> - Use CSS animations instead
<big> - Use CSS font-size instead
<strike> - Use <del> or <s> instead
<tt> - Use <code> or CSS instead
<frame>, <frameset> - Use <iframe> if needed
<acronym> - Use <abbr> instead
<applet> - Use <object> or <embed> instead

HTML Best Practices

General Guidelines

Always declare DOCTYPE
Use lowercase for element and attribute names
Close all HTML elements (even self-closing ones in XHTML)
Quote attribute values
Always specify alt for images
Use semantic elements appropriately
Validate your HTML
Keep accessibility in mind (ARIA attributes, proper headings)
Use comments to organize sections
Indent nested elements for readability

Accessibility

Use semantic HTML elements
Include alt text for images
Use proper heading hierarchy (h1-h6)
Label form inputs properly
Ensure sufficient color contrast
Make interactive elements keyboard accessible
Use ARIA attributes when needed
Provide text alternatives for non-text content

ARIA Attributes (Examples)

<button aria-label="Close dialog">X</button>
<div role="alert" aria-live="polite">Message</div>
<input aria-required="true" aria-describedby="help-text">
<nav aria-label="Main navigation">...</nav>

Common HTML Patterns

Responsive Images

<img src="small.jpg" 
     srcset="small.jpg 300w, medium.jpg 600w, large.jpg 1200w"
     sizes="(max-width: 600px) 300px, (max-width: 1200px) 600px, 1200px"
     alt="Description">

Skip Link (Accessibility)

<a href="#main-content" class="skip-link">Skip to main content</a>

Loading Attribute

<img src="image.jpg" loading="lazy" alt="Description">
<iframe src="page.html" loading="lazy"></iframe>