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