HTML Boilerplate
1<!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport"content="width=device-width, initial-scale=1.0">
6 <meta name="description" content="A brief description of the page content.">
7 <title>Page Title</title>
8 <link rel="stylesheet" href="styles.css">
9 </head>
10 <body>
11 <header>
12 <!-- Header content -->
13 </header>
14
15 <main>
16 <!-- Main content -->
17 <h1>Welcome to My Website</h1>
18 <p>This is a paragraph.</p>
19 </main>
20
21 <footer>
22 <!-- Footer content -->
23 </footer>
24
25 <script src="script.js"></script>
26 </body>
27 </html>- DOCTYPE:
<!DOCTYPE html>declares this as an HTML5 document. - HTML Tag:
<html lang="en">specifies the language for better accessibility. - Head Section:
<meta charset="UTF-8">sets the character encoding to UTF-8.<meta name="viewport">ensures correct rendering on mobile devices.<title>defines the page title, important for SEO and browser tabs.<meta name="description">for SEO purposes in search results.<link rel="stylesheet">to include external CSS.
- Body Section:
- Use semantic tags like
<header>,<main>,<footer>for structure. <script>at the end of<body>for better page load performance.
- Use semantic tags like
- Closing Tags: All opened tags must be properly closed for valid HTML.
Headings
1<h1>This is Heading 1 - Largest</h1>
2<h2>This is Heading 2</h2>
3<h3>This is Heading 3</h3>
4<h4>This is Heading 4</h4>
5<h5>This is Heading 5</h5>
6<h6>This is Heading 6 - Smallest</h6>- Hierarchy: The headings range from
<h1>(the highest level) to<h6>(the lowest level), allowing for clear structural hierarchy in content. - Syntax: Each heading starts with an opening tag
<hX>and ends with a closing tag</hX>, where X is a number from 1 to 6. - Content: The text between these tags is what appears as the heading on the page.
- Default Styling: Browsers apply different default font sizes and weights to each heading level, with
<h1>being the largest and<h6>the smallest. - Semantic Use: These tags are intended for semantic structuring of content, not merely for visual presentation.
<h1>should generally be used once per page for the main heading, with subsequent<h2>through<h6>for subsections.
Text Formatting Tags
1<p>This is a paragraph.</p>
2
3<strong>This text is bold.</strong>
4or
5<b>This text is also bold.</b>
6
7<em>This text is italicized.</em>
8or
9<i>This text is also italicized.</i>
10
11<mark>This text is highlighted.</mark>
12
13<small>This text is smaller.</small>
14
15<del>This text is deleted.</del>
16
17<ins>This text is inserted.</ins>
18
19<sub>This is subscript.</sub>
20
21<sup>This is superscript.</sup>
22
23<!-- Inline quotation -->
24<q>Short quotation</q>
25
26<!-- Block quotation -->
27<blockquote>
28 <p>Here's a longer quote.</p>
29</blockquote>- Paragraph: The
<p>tag is used to define a paragraph of text. - Bold Text:
<strong>conveys semantic importance or emphasis, making text bold.<b>provides the same visual effect but without semantic meaning, used for stylistic purposes.
- Italicized Text:
<em>implies emphasis or stress, rendering text in italics.<i>provides italics for stylistic reasons, not semantic emphasis.
- Highlighted Text:
<mark>is used to highlight parts of text for reference or notation. - Smaller Text:
<small>reduces the font size of the enclosed text. - Deleted Text:
<del>indicates text that has been removed or deleted from a document. - Inserted Text:
<ins>shows text that has been added or inserted into the document. - Subscript:
<sub>lowers text and makes it smaller, typically used for chemical formulas or mathematical expressions. - Superscript:
<sup>raises text and makes it smaller, often used for exponents or footnotes. - Inline Quotation:
<q>is for short, inline quotations, automatically adding quotation marks in most browsers. - Block Quotation:
<blockquote>is used for longer quotations or cited content, usually with indentation or different styling to visually distinguish it from the rest of the text.
Lists
1<!-- Unordered List (Bullets) -->
2<ul>
3 <li>Item 1</li>
4 <li>Item 2</li>
5 <li>Item 3</li>
6</ul>
7
8<!-- Ordered List (Numbers) -->
9<ol>
10 <li>First Item</li>
11 <li>Second Item</li>
12 <li>Third Item</li>
13</ol>
14
15<!-- Description List -->
16<dl>
17 <dt>Term 1</dt>
18 <dd>Description of Term 1</dd>
19 <dt>Term 2</dt>
20 <dd>Description of Term 2</dd>
21</dl>
22
23<!-- Nested Lists -->
24<ul>
25 <li>Parent Item
26 <ul>
27 <li>Child Item 1</li>
28 <li>Child Item 2</li>
29 </ul>
30 </li>
31 <li>Another Parent Item</li>
32</ul>
33
34<!-- Custom Bullet Points -->
35<ul style="list-style-type: square;">
36 <li>Square Bullet</li>
37</ul>
38<ul style="list-style-type: circle;">
39 <li>Circle Bullet</li>
40</ul>
41<ul style="list-style-type: none;">
42 <li>No Bullet</li>
43</ul>
44
45<!-- Custom Numbering -->
46<ol type="A">
47 <li>Capital Letters</li>
48 <li>Next Letter</li>
49</ol>
50<ol type="i">
51 <li>Lower Roman Numerals</li>
52 <li>Next Roman Numeral</li>
53</ol>- Unordered Lists: Use
<ul>for bullet-point lists. Default is disc-shaped bullets. - Ordered Lists: Use
<ol>for numbered lists. Default starts with Arabic numbers. - Description Lists: Use
<dl>for terms and descriptions, with<dt>for terms and<dd>for descriptions. - Nested Lists: Can be placed inside another list item for hierarchy. Both
<ul>and<ol>can be nested within each other. - Custom Bullet Points: Change bullet style with CSS, e.g.,
style="list-style-type: square;". - Custom Numbering: Use the
typeattribute on<ol>for letter or roman numeral numbering, liketype="A"ortype="i". - List Styling: While HTML provides basic list structures, CSS is often used for advanced styling of lists.
Links
1<!-- Basic Hyperlink -->
2<a href="https://example.com">Visit Example.com</a>
3
4<!-- Link to Local File -->
5<a href="documents/myfile.pdf">Download PDF</a>
6
7<!-- Link to Another Page in the Same Site -->
8<a href="/about.html">About Us</a>
9
10<!-- Email Link -->
11<a href="mailto:info@example.com">Email Us</a>
12
13<!-- Telephone Link -->
14<a href="tel:+1234567890">Call Us</a>
15
16<!-- Link with Title Attribute -->
17<a href="https://example.com" title="Visit our homepage">Home</a>
18
19<!-- Opening Link in New Tab/Window -->
20<a href="https://example.com" target="_blank">Open in New Tab</a>
21
22<!-- Link to a Specific Part of the Page -->
23<p id="top">This is the top of the page.</p>
24<a href="#bottom">Go to Bottom</a>
25<p id="bottom" style="margin-top: 1000px;">This is the bottom of the page.</p>
26<a href="#top">Back to Top</a>
27
28<!-- Download Link -->
29<a href="images/picture.jpg" download="cool-picture">Download Image</a>
30- Basic Hyperlink: Use
<a href="URL">Text</a>to link to external sites. - Local File: Link to local files with
<a href="path/to/file">Text</a>. - Same Site Navigation: Navigate within your site using
<a href="/page.html">Text</a>. - Email Link: Use
<a href="mailto:email@example.com">Text</a>to create email links. - Telephone Link: Create phone number links with
<a href="tel:+1234567890">Text</a>. - Title Attribute: Provide extra info on hover with
title, e.g.,<a href="URL" title="Info">Text</a>. - New Tab/Window: Open links in new tabs with
target="_blank", like<a href="URL" target="_blank">Text</a>. - Anchor Links: Link within a page using IDs, e.g.,
<a href="#section">Text</a>and<p id="section">. - Download Link: Force a download with
download, like<a href="URL" download="filename">Text</a>.
Tables
1<!-- Basic Table -->
2<table>
3 <tr>
4 <th>Header 1</th>
5 <th>Header 2</th>
6 </tr>
7 <tr>
8 <td>Row 1, Cell 1</td>
9 <td>Row 1, Cell 2</td>
10 </tr>
11 <tr>
12 <td>Row 2, Cell 1</td>
13 <td>Row 2, Cell 2</td>
14 </tr>
15</table>
16
17<!-- Table with Row and Column Span -->
18<table>
19 <tr>
20 <th colspan="2">Header Spanning Two Columns</th>
21 </tr>
22 <tr>
23 <td rowspan="2">Cell Spanning Two Rows</td>
24 <td>Cell A</td>
25 </tr>
26 <tr>
27 <td>Cell B</td>
28 </tr>
29</table>
30
31<!-- Table with Border -->
32<table border="1">
33 <tr>
34 <th>Name</th>
35 <th>Age</th>
36 </tr>
37 <tr>
38 <td>Alice</td>
39 <td>25</td>
40 </tr>
41</table>
42
43<!-- Table Caption -->
44<table>
45 <caption>Population by Country</caption>
46 <tr>
47 <th>Country</th>
48 <th>Population</th>
49 </tr>
50 <tr>
51 <td>USA</td>
52 <td>331 million</td>
53 </tr>
54</table>
55
56<!-- Table with Header, Body, and Footer -->
57<table>
58 <thead>
59 <tr>
60 <th>Header 1</th>
61 <th>Header 2</th>
62 </tr>
63 </thead>
64 <tbody>
65 <tr>
66 <td>Body Row 1, Cell 1</td>
67 <td>Body Row 1, Cell 2</td>
68 </tr>
69 </tbody>
70 <tfoot>
71 <tr>
72 <td>Footer 1</td>
73 <td>Footer 2</td>
74 </tr>
75 </tfoot>
76</table>
77- Basic Structure: Use
<table>for tables,<tr>for rows,<th>for headers, and<td>for data cells. - Row and Column Span: Merge cells with
colspanfor columns androwspanfor rows. - Border Attribute: Add a simple border with
border="1", though this is outdated; CSS is preferred for styling. - Caption: Describe the table with
<caption></caption>. - Semantic Sections: Use
<thead>,<tbody>, and<tfoot>for table structure readability. - Styling Tables: Apply CSS for appearance, either inline or externally, for color, borders, widths, etc.
Forms - Basic Form
1<!-- Basic Form -->
2<form action="#" method="get">
3 <label for="username">Username:</label>
4 <input type="text" id="username" name="username">
5 <label for="password">Password:</label>
6 <input type="password" id="password" name="password">
7 <input type="submit" value="Submit">
8</form>
9
10<!-- Form with Placeholder and Required -->
11<form action="#">
12 <label for="email">Email:</label>
13 <input type="email" id="email" name="email" placeholder="your.email@example.com" required>
14 <input type="submit" value="Submit">
15</form>
16
17<!-- Form with Button and Reset -->
18<form action="#">
19 <label for="search">Search:</label>
20 <input type="text" id="search" name="search">
21 <button type="submit">Search</button>
22 <button type="reset">Reset</button>
23</form>
24- Basic Form Structure: Use
<form>,<label>,<input>, and submit buttons. - Action Attribute: The
actionattribute in the<form>tag specifies where to send the form data when submitted, typically a URL or a server script. - Placeholders & Required: Use
placeholderfor hints andrequiredfor mandatory fields. - Buttons: Use
<button>for submit and reset actions.
Forms - Radio Buttons
1<!-- Radio Buttons -->
2<form action="#">
3 <p>Choose your favorite:</p>
4 <label><input type="radio" name="favorite" value="apple"> Apple</label>
5 <label><input type="radio" name="favorite" value="banana"> Banana</label>
6 <input type="submit" value="Submit">
7</form>
8- Radio Buttons: Group choices with
<input type="radio">for single selection.
Forms - Checkboxes
1<!-- Checkboxes -->
2<form action="#">
3 <p>Select your interests:</p>
4 <label><input type="checkbox" name="interest" value="coding"> Coding</label>
5 <label><input type="checkbox" name="interest" value="music"> Music</label>
6 <input type="submit" value="Submit">
7</form>- Checkboxes: Allow multiple selections with
<input type="checkbox">.
Forms - Select Dropdown
1<!-- Select Dropdown -->
2<form action="#">
3 <label for="country">Choose a country:</label>
4 <select id="country" name="country">
5 <option value="usa">USA</option>
6 <option value="canada">Canada</option>
7 <option value="uk">UK</option>
8 </select>
9 <input type="submit" value="Submit">
10</form>
11- Select Dropdown: Create drop-down menus with
<select>and<option>.
Forms - Textarea
1<!-- Textarea -->
2<form action="#">
3 <label for="comments">Comments:</label>
4 <textarea id="comments" name="comments" rows="4" cols="50"></textarea>
5 <input type="submit" value="Submit">
6</form>- Textarea: Provide space for longer text input using
<textarea>.
Forms - Multiple Input Types
1<!-- Multiple Input Types -->
2<form action="#">
3 <label for="number">Number:</label>
4 <input type="number" id="number" name="number" min="1" max="10">
5 <label for="date">Date:</label>
6 <input type="date" id="date" name="date">
7 <label for="range">Range:</label>
8 <input type="range" id="range" name="range" min="0" max="100">
9 <label for="color">Color:</label>
10 <input type="color" id="color" name="color">
11 <input type="submit" value="Submit">
12</form>- Varied Input Types: Include
number,date,range, andcolorfor specialized inputs.
Forms - File Upload
1<!-- File Upload -->
2<form action="#" method="post" enctype="multipart/form-data">
3 <label for="file">Upload a file:</label>
4 <input type="file" id="file" name="file">
5 <input type="submit" value="Submit">
6</form>- File Upload: Use
<input type="file">withenctype="multipart/form-data"in the form.
Line Break - Horizontal Rule
1<!-- Basic Line Break -->
2<p>This is the first line.<br>This is the second line.</p>
3
4<!-- Multiple Line Breaks -->
5<p>This is the first paragraph.<br><br><br>This is the third paragraph.</p>
6
7<!-- Horizontal Rule -->
8<hr>
9
10<!-- Horizontal Rule with Attributes -->
11<hr width="50%" size="3" color="red">
12
13<!-- Combining br and hr -->
14<p>Here's some text.<br>
15 <hr>
16 And here's more text after a line break and a horizontal rule.
17</p>
18- Line Break
<br>: Adds a single line break in the text flow, for new lines without paragraph separation. - Multiple
<br>s: Can be used consecutively to create more vertical space. - Horizontal Rule
<hr>: Creates a thematic break or a line in the document, visually separating content. - HR Attributes: Although less common now,
<hr>can use attributes likewidth,size, andcolorfor basic styling. CSS is preferred for modern use.
Div (Division Element)
1<!-- Basic Div Usage -->
2<div>
3 This is a simple div for block-level content.
4</div>
5
6<!-- Div with Class for Styling -->
7<div class="box blue-background">
8 This div uses a class for background color styling.
9</div>
10
11<!-- Div with ID -->
12<div id="unique-div" class="box">
13 This div has an ID for unique targeting or JavaScript interaction.
14</div>
15
16<!-- Nested Divs -->
17<div class="box">
18 <div>First nested div.</div>
19 <div>Second nested div.</div>
20</div>
21
22<!-- Div for Sectioning Content -->
23<div class="box">
24 <h3>Section Title</h3>
25 <p>This div groups related content into a section.</p>
26</div>
27- Block-Level Container:
<div>is used for block-level layout, creating new lines before and after itself. - Styling: Easily styled with CSS through classes or IDs for layout, borders, backgrounds, etc.
- Unique Targeting: Use
idfor uniquely identifying a div for specific CSS or JavaScript actions. - Nesting: Can contain other
<div>s or elements, useful for nested or complex structures. - Semantic Container: While not inherently semantic, it can group related content when no specific semantic element exists.
- Generic Use: A go-to when you need a non-semantic container for custom layouts or when no more specific HTML5 element fits the context.
Span
1<!-- Basic Span Usage -->
2<p>This is a paragraph with some <span>inline text</span>.</p>
3
4<!-- Span for Styling -->
5<p>Here's a <span class="highlight">highlighted</span> word for emphasis.</p>
6
7<!-- Span for Semantic Meaning -->
8<p>Here, <span lang="fr">Bonjour</span> is French for "Hello".</p>
9
10<!-- Span for Errors or Warnings -->
11<p>Input <span class="error">error</span> detected.</p>
12
13<!-- Span for Size Adjustment -->
14<p>This sentence has <span class="small-text">smaller text</span> within it.</p>
15
16<!-- Multiple Spans for Different Effects -->
17<p>This <span class="highlight">highlighted</span> <span class="small-text">small</span> <span class="error">error</span> demonstrates multiple spans.</p>
18
19<!-- Span with Title for Tooltip -->
20<p>Hover over this <span title="This is a tooltip">text</span> for a tooltip.</p>
21
22- Inline Element:
<span>is used for inline content, affecting only the text it wraps without breaking the flow. - Styling: Ideal for applying CSS to small segments of text for effects like color, size, or background changes.
- Semantic Use: Can denote language changes, technical terms, or other inline semantic distinctions using attributes like
lang. - Error/Warning: Useful for highlighting errors or warnings within text.
- Tooltips: The
titleattribute can be used for providing additional info on hover.
Image Element - Img
1<img src="image.jpg" alt="Description of image">
2
3<!-- Common attributes -->
4<img src="image.jpg"
5 alt="Description"
6 width="300"
7 height="200"
8 loading="lazy"
9 srcset="image-small.jpg 300w, image-large.jpg 600w"
10 sizes="(max-width: 300px) 100vw, 300px">
11
12<!-- With figure and figcaption -->
13<figure>
14 <img src="image.jpg" alt="Description of image">
15 <figcaption>Image caption goes here.</figcaption>
16</figure>
17 - src - Specifies the path to the image.
- alt - Provides alternative text for accessibility.
- width - Sets the width of the image.
- height - Sets the height of the image.
- loading - Use 'lazy' for performance.
- srcset - Allows for responsive images by specifying different image sources.
- sizes - Helps in selecting the appropriate image from srcset based on viewport size.
- figure - Container for self-contained content like images, illustrations, diagrams, etc.
- figcaption - Provides a caption or legend for the content within a
figureelement. - Use
figurefor content that can be moved away from the main flow without affecting the document's meaning. figcaptioncan be the first or last child withinfigure.
ARIA Attributes
1<!-- ARIA Live Regions -->
2<div aria-live="polite">Live updates here.</div>
3
4<!-- ARIA Labels -->
5<button aria-label="Close">X</button>
6<input type="text" aria-labelledby="nameLabel" placeholder="Name">
7<label id="nameLabel">Enter your name:</label>
8
9<!-- ARIA Roles -->
10<div role="dialog" aria-labelledby="dialogTitle" aria-describedby="dialogDesc">
11 <h2 id="dialogTitle">Dialog Title</h2>
12 <p id="dialogDesc">Dialog description.</p>
13</div>
14
15<!-- ARIA States and Properties -->
16<button aria-expanded="false">Expand Menu</button>
17<div role="tablist">
18 <button role="tab" aria-selected="true" aria-controls="panel1">Tab 1</button>
19 <div id="panel1" role="tabpanel" aria-labelledby="tab1">Content for tab 1</div>
20</button>
21
22<!-- ARIA for Form Elements -->
23<input type="checkbox" aria-checked="false" aria-label="Agree to terms">
24<select aria-required="true">
25 <option value="option1">Option 1</option>
26</select>
27
28<!-- ARIA for Landmarks -->
29<nav role="navigation" aria-label="Main Menu">
30 <ul>
31 <li><a href="#home">Home</a></li>
32 </ul>
33</nav>
34
35<!-- ARIA for Dynamic Content -->
36<div role="region" aria-relevant="additions" aria-live="assertive">
37 Dynamic content will be announced here.
38</div>- aria-live - Announces dynamic content changes to screen readers.
- aria-label/aria-labelledby - Provides an accessible name for elements without visible text.
- role - Defines the role of an element for assistive technologies, like 'dialog', 'tab', or 'button'.
- aria-expanded - Indicates if an element is expandable or collapsible.
- aria-selected - Marks the current item as selected within a set.
- aria-controls - Identifies one or more elements controlled by another.
- aria-checked - Indicates the state of checkboxes or similar toggles.
- aria-required - Specifies that user input is mandatory for an element before form submission.
- aria-relevant - Determines what types of changes in a live region are to be announced.
- aria-assertive - Used with aria-live for immediate announcement of changes.
- ARIA should enhance or repair native semantics, not replace them.
