Document Outline<!DOCTYPE> | Version of (X)HTML | <html> | HTML document | <head> | Page information | <body> | Page contents | <!-- --> | Comments |
Page Information<base /> | Base URL | <meta /> | Meta data | <title> | Title | <link /> | link to CSS | <style> | Insert CSS | <script> | Insert JavaScript |
Document Structure<h[1-6]> | Heading | -> h1 most important, h6 least important | <div> | Page section | <span> | Inline section | <p> | Paragraph | <br /> or <br> | Line break | <hr /> or <hr> | Horizontal rule |
Anchors (link)<a href="URL"> | anchor (link) | Absolute links - "https://www.example.com" Relative links - "example.html" Root-relative links - "/page" | <a href="mailto:"> | Email link | <a href="tel:"> | Phone dial link | <a id="name"> | Anchor | <a href="#name"> | Link to anchor | <a target="_value"> | specifies link location | _blank - in a new window or tab _self - in the same window/tab (default) _parent - in the parent frame _top - in the full body of the window framename - in a named frame | <a title="title"> | specifies extra information about an element that shown as a tooltip text when the mouse moves over the element. | <a download> or <a download="name"> | Specifies that the target will be downloaded. The value of the attribute will be the name of the downloaded file. If the value is omitted, the original filename is used. | <a hreflang="language_code"> | Specifies the language of anchor linked | <a rel="value"> | specifies relationship with current document |
Favicon (shortcut icon)<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> | Include an icon in the title. |
Uniform Resource Locators (URL)Scheme | Short for | Used for | http | HyperText Transfer Protocol | Common web pages. Not encrypted | https | Secure HyperText Transfer Protocol | Secure web pages. Encrypted | ftp | File Transfer Protocol | Downloading or uploading files | file | | A file on your computer |
Form<form action="URL" method="get | post"> | Form | <label for="id"> | Label | <input /> | form input | attribute: maxlength | maximum length of input | attribute: name | name for input | attribute: placeholder | placeholder for input | attribute: type="text" | Text Input | attribute: type="password" | Password Input | attribute: type="hidden" | Hidden input | attribute: type="date" | Date Input | attribute: type="file" | File input | attribute: type="submit" | Submit button | attribute: type="image" src="URL" width=" " height=" " | Image submit button | attribute: type="email" | Email input | attribute: type="url" | URL input | attribute: type="search" | Search input | Radio button and Checkbox | attribute: type="radio" value=" " | Radio button | attribute: type="checkbox" value=" " | Checkbox | attribute: checked="checked" | pre-checked input | Drop Down List Box | <select> | Drop Down List Box | <select size="#" multiple="multiple"> | Multiple Select Box | <option value=" "> | option for drop-down list | attribute: required="required" | Form Validation | <button type="button"> | button | <fieldset> | Grouping Form Elements | <legend> | caption |
<meta> name Attribute<meta name="value">
<meta name="author" content=" ">
<meta name="description" content=" ">
<meta name="generator" content=" ">
<meta name="keywords" content=" , , ">
<meta name="viewport" content=" "> |
Other Tags<embed type=" " src=" "> | External application | <nav> | navigation section | <header> | Header section | <footer> | Footer section | attribute: contenteditable="true" | Allow editable areas | attribute: spellcheck="true" | Allow spell check areas |
| | Lists<ol> | Ordered list | <ol type="1|a|A|i|I"> | 1 Default value Decimal numbers 1,2,3,4 a Alphabetically ordered (lowercase) a,b,c,d A Alphabetically ordered (uppercase) A,B,C,D i Roman Numerals (lowercase) i,ii,iii,iv I Roman Numerals (uppercase) I,II,III,IV | <ol start="number"> | Define the number the list will start with | <li value="number"></li> | Overwrite the number the list will display | <ul> | Unordered list | <li> | List item | <dl> | Definition list | <dt> | Definition term | <dd> | Term description |
Quotation and Citation Elements<q> | Short quotation | <blockquote cite="URL"> | Long quotation | <abbr title=" "> | Abbreviation | <address> | Address | <cite> | Citation | <bdo dir="value"> value = rtl or ltr | Bi-directional override | <pre> | Preformatted text | <dfn> | Defining a term | <code> | Code | <var> | Variable | <kbd> | Keyboard input | <samp> | Sample output |
Tables<table> | Table | <caption> | Caption | <thead> | Table header | <tbody> | Table body | <tfoot> | Table footer | <colgroup> | Column group | <col> | Column | <tr> | Table row | <th> | Header cell | <td> | Table cell | <td colspan="#"> | Spanning column | <td rowspan="#"> | Spanning row |
Image Map<img src="URL" usemap="#shapes">
<map name="shapes">
<area shape="polygon" coords=" , , ">
<area shape="rectangle" coords=", ,">
<area shape="circle" coords=" , , ">
</map> |
Images<img /> | Image | <figure> | Contain images and caption | <figcaption> | caption of image |
Attribute of image:
src="URL" alt="..." title="..."
width="px" height="px"
Common Character Entities" | " | Quotation mark | & | & | Ampersand | < | < | Less than | > | > | Greater than | @ | @ | "At" symbol | € | € | Euro | • | • | Small bullet | ™ | ™ | Trademark | £ | £ | Pound |   | | Non-breaking space | © | © | Copyright symbol |
Core Attributesclass=" " | Indicates Class (non-unique) | id=" " | Indicates ID (unique) |
The only restrictions on the value of an id and class are:
- it must not contain any space characters
- it must contain at least one character
- It must begin with a letter, which may followed only by: letters (A-Z/a-z), hyphens ("-"), colons (":"), digits (0-9), underscores ("_"), periods (".")
JavaScript<script src="URL"></script> | Include JS | <script src="URL" async> </script> | Once JS is fully downloaded, it will interrupt the HTML parsing in order to parse the Javascript file | <script src="URL" defer> </script> | HTML parsing will only be performed once the HTML is fully parsed. | <noscript> JavaScript disabled </noscript> | The content of <noscript> is displayed whenever Javascript is disabled for the current page. |
Media Elements<audio controls> | Audio | <source src=" " type="audio/mpeg"> | <video width=" " height=" " controls> | Video | <source src=" " type="video/mp4"> |
Browser will display the word between media tags when media is not supported.
<meta> http-equiv Attribute<meta http-equiv="content-type|default-style|refresh">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="default-style" content="title of preferred stylesheet">
<meta http-equiv="refresh" content="300"> |
|
Created By
Metadata
Favourited By
Comments
No comments yet. Add yours below!
Add a Comment
Related Cheat Sheets