Quick Reference Guides
44 HTML Reference
Here are some quick reference reminders about the features of HTML introduced in this book. Links to further details are provided. For full details, I recommend w3schools.
Quick Facts
- HTML (Hypertext Markup Language) defines the structure of a document.
- You should maintain a strict separation of concerns between HTML and CSS. Never pick an HTML element on the basis of how it looks in its default style.
- HTML is not a programming language.
HTML Document Structure
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Web site title</title>
</head>
<body>
Visible elements go here
</body>
</html>
Get more templates from the Full Stack Example Pack repository.
HTML Basic Layout
<p>Paragraph</p> <h1>Level 1 heading</h1> <h2>Level 2 heading</h2> <div>Logical division</div> <strong>emphasized text</strong> <i>Alternate voice</i> <a href="url">link</a> <img src="url"> <ul>unordered list items</ul> <ol>ordered list items</ol> <li>list item</li> List of all HTML Elements
HTML Attributes
id="single_word" class="space separated list" title="popup tool tip" href="link url" src="img url"
HTML Input Elements
Shown with optional attributes
<input type="text" placeholder="..." maxlength="..."> <input type="button" value="..."> <input type="password"> <input type="number" min="..." max="..." step="..."> <input type="range" min="..." max="..." step="..."> <input type="date" min="..." max="..." step="..."> <input type="time" min="..." max="..." step="..."> <input type="color"> <input type="image">
Other attributes include autofocus, readonly, and disabled.
(Note: For form elements, the name attribute, and type=”hidden”, see PHP Reference.)
(For even more, see drop-down lists, check boxes, radio buttons, text areas.)
HTML Canvas Element
<canvas height="..." width="..."></canvas>
HTML Tables
The thead and th elements below are optional.
<table>
<thead>
<tr><th>heading 1</th><th>heading 2</th></tr>
</thead>
<tbody>
<tr>
<td>First row, first column</td>
<td>First row, second column</td>
</tr>
<tr>
<td>Second row, first column</td>
<td>Second row, second column</td>
</tr>
</tbody>
<table>
