html5 Cheatsheet 2019 PDF

CHEAT SHEET
HTML5 WEB DEVELOPMENT

Created by @Manz ( https://twitter.com/Manz ) https://lenguajehtml.com/
S HTML Syntax Tag structure C Comment Syntax Dev annotations S Social metadata For social networks
HTML TAG/ATTRIBUTE SYNTAX HTML COMMENT SYNTAX FACEBOOK OPEN GRAPH
<tag attribute="value"> content </tag>  <meta> metadata tag for open graph
property metadata type open graph
D Document tags HTML main structure H Head tags Header & document metadata content metadata value open graph
MAIN TAGS RELATIONS REQUIRED METADATA PROPERTIES
<!DOCTYPE html> HTML5 document <link> document relation og:title title of your object
<html> document content root tag href link to related document og:type type of your object
<head> metadata header related docs hreflang code doc language en, es... music video article book
<body> page content visible content type mime hint type for browser profile website
title set title to stylesheet set og:image image url for preview
G Global Attributes for all elements sizes hint size for favicon 64x64, 96x96 og:url canonical & absolute url
DOM / STYLE ATTRIBUTES rel relation type with other document OPTIONAL METADATA PROPERTIES
id element identifier unique per page BASIC RELATION
og:audio complementary audio url
class element class multiple per page alternate link to alternate version og:description 1-2 sentence descr.
slot element slot reference to <slot> author link to author URL og:determiner word auto, the, a, an, ...
style inline CSS styles css properties help link to help URL og:locale language default: en_US
GLOBAL ATTRIBUTES icon link to favicon URL (tab icon) og:locale:alternative others lang array
accesskey shortcut key to focus license fetch module map og:site_name general site name
contenteditable allow edit element pingback link to pingback server og:video complementary video url
dir ltr rtl auto text direction search link to search page url
TWITTER CARDS
draggable auto enable drag and drop stylesheet imports a css style sheet
<meta> metadata tag for twitter cards
hidden hide element not relevant URL STRUCTURE RELATION
name metadata type twitter cards
is custom-elem custom built-in elem canonical link to preferred URL content metadata value twitter cards
lang code set content lang en, es, fr... prev prev part URL of series doc BASIC METADATA PROPERTIES
nonce hash whitelist script/style [CSP] next next part URL of series doc twitter:title title of your object
spellcheck disable grammar check RESOURCE HINTS twitter:card type of your object
tabindex num set element order
dns-prefetch resolve dns domain summary summary_large_image
title set tooltip text mouse hover
preconnect pre connect to domain app player
translate yes no disable translation
prefetch fetch/cache link for future OPTIONAL METADATA PROPERTIES
data-* custom metadata on element
preload fetch/cache link for now twitter:site account site name
HINT TO BROWSER
modulepreload fetch module map twitter:creator account name @manz
enterkeyhint enter done go search prerender background render page twitter:description description
next previous send virtual keyb label as script font image audio video fetch twitter:image absolute image url
inputmode none text tel url email document embed object style track APP METADATA PROPERTIES
numeric decimal search worker twitter:app:country country code
MICRODATA ATTRIBUTES
DOCUMENT METADATA twitter:app:name: **** name of app
itemid set global urn unique identifier
<meta> document metadata twitter:app:id: **** identifier of app
itemscope new metadata item
charset enc encoding utf-8, iso-8859-1... twitter:app:url: **** url of app store
itemtype set microdata genre url
name name of metadata iphone ipad googleplay id for ****
itemref id list set reference to "id"
application-name short webapp name PLAYER METADATA PROPERTIES
itemprop token set property & value
author name of the page's author twitter:player https url to iframe player
description seo page description
S Inline Styling CSS inline GOOGLE SEO RECOMMENDATIONS
generator software used to build web
INLINE STYLES <title> first - second | brand 50-60 chars
keywords comma-separated tags
<style> embed css style in a document <meta> metadata google-supported
referrer default page referrer policy
title set title to stylesheet set name metadata name
theme-color primary theme css color
type mime hint type for browser description text snippet 50-160 chars
viewport hint to initial size viewport
ONLY FOR <LINK>, PICTURE <SOURCE> & <STYLE> robots googlebot set bots behaviour
http-equiv pragma directive (legacy) all noindex nofollow none
media apply to specific devices content-type legacy alt. to charset noarchive nosnippet noodp
all all devices computers, mobiles... default-style default stylesheet set notranslate noimageindex
print printables devices refresh html redirect 10; URL=file.html unavailable_after: date
screen all devices - (print + speech) x-ua-compatible better compat IE=edge google disable google features
speech devices that read a page content-security-policy enforce csp notranslate nositelinkssearchbox
content metadata value
CHEATSHEET LEGEND rating adult exclude secure search
<title> seo document title viewport optimized-mobile page
html tag html tag w/o close tag obsolete
<base> set a document base url content="width=device-width, initial-scale=1.0"
attribute attribute w/o value
href link to base url to use
value default value values set
target context place to open link
value for content value part
CHEAT SHEET

F Forms Forms related tags S Select data tags Interactive combo I Interactive tags Other elements
MAIN ELEMENTS SELECT ELEMENTS OTHER FORM ELEMENTS
<form> form elements collection <select> form elements collection <output> result of calculation
name form name document.forms api name form name document.forms api name element name forms.elements api
method GET POST dialog send method form associate input with a form form associate input with a form
action url to backend form submission size size of element in characters for associate result to other element
accept-charset enc force encoding utf-8 autocomplete on off autofill for input <progress> show a bar progress
autocomplete on off autofill for all form autofocus focus input when loaded value current value of bar progress
novalidate bypass form validation disabled avoid press button max max value of bar progress
target context place to put response required required field default: optional <meter> show a known range meter
enctype application/x-www-form-urlencoded multiple allow select multiple values value current value of meter
multipart/form-data text/plain encoding type <datalist> predefined and open data list low limit of low range
<label> associate element with caption SELECT CHILDREN ELEMENTS high limit of high range
for reference to id of related element <option> item from <select> or <datalist> min lower bound of range
GROUP FORMS label user-visible text instead content max upper bound of range
<fieldset> group of form elements value item value for form submit optimum optimum value in gauge
name element name forms.elements api selected options selected by default OTHER INTERACTIVE ELEMENTS
form associate fieldset with a form disabled avoid select this item option <details> disclosure widget html accordion
disabled avoid select this group items <optgroup> group of <option> open keep accordion opened
<legend> caption text for fieldset label user-visible group text <summary> caption or title for <details>
disabled avoid select this items <dialog> window box container dialog box
I Input elements User input types
open keep dialog opened
USER INPUT DATA
B Generic Button HTML Button
<input> <textarea> specific & large text HTML GENERIC <BUTTON> V Validations HTML validations
name element name form.elements api USER INPUT DATA
<button> generic button container
autocomplete on off autofill for input TEXT VALIDATIONS <INPUT> & <TEXTAREA>
name element name form.elements api
autofocus focus input when loaded minlength maxlength min/max length
type submit reset button button type
dirname submit element directionality GENERAL VALIDATIONS <INPUT> & <TEXTAREA>
value button value for form submission
form associate input with a form required required field default: optional
form associate input with a form
placeholder user visual hint autofocus focus button when loaded disabled avoid edit field not send
ONLY <INPUT> ELEMENT disabled avoid press button readonly avoid edit field send
<input> specific text input short text NUMBER VALIDATIONS ONLY <INPUT>
type text hidden search tel url email D Deprecated tags Obsolete elements min max min/max value number
number range color file password
DEPRECATED TAG RECOMMENDED TAG
step granularity step between values
datetime-local date time week month POWERFUL VALIDATIONS ONLY <INPUT>
<applet> java widgets <embed> <object>
checkbox radio submit image reset button pattern REGEXP pattern for test validation
<acronym> abbreviation <abbr>
value current value of input element
<basefont> main font use CSS instead
size size of element in characters A ARIA Attributes Accesible elements
<big> bigger text use CSS font-size
list associate with id of <datalist> ACCESIBLE RICH INTERNET APPLICATIONS
<bgsound> background sound <audio>
accept hint for expected file in upload role specify accessible role for element
<blink> flicker text use CSS animation
checked enable in radio or checkbox complementary list listitem main navigation
<center> center text use CSS text-align
multiple allow multiple values region tab alert application article banner
<dir> directory list use lists instead <ul>
ONLY IMAGE <INPUT> ELEMENT
<font> set font features use CSS instead button cell checkbox contentinfo dialog
src url or name of image button document feed figure form grid gridcell
<frame> <frameset> frames <iframe>
alt alternative text to image heading img listbox row rowgroup search
<marquee> move text use CSS animation
width height image width/height size switch table tabpanel textbox timer
<multicol> col layout use CSS columns
ONLY <TEXTAREA> ELEMENT aria-checked true false mixed
<noframes> frames fallback no supported
<textarea> multiline text input large text <isindex> search in page <input> aria-selected set current state
rows cols number of lines and columns <keygen> keypair gen use webcrypto API LABELS
wrap wrap text <listing> preformatted text <pre> <code> aria-label specify a string as label
ALTER FORM SUBMISSION ONLY SUBMIT <INPUT> & <BUTTON> <menuitem> context menu no supported aria-labelledby specify id as label elem
formaction formtarget formnovalidate <nextid> auto id generated no supported RELATIONSHIPS
formenctype formmethod <nobr> no break use CSS instead aria-owns set id element as child
attributes to alter main form submission <noembed> no embed fallback <object> aria-activedescendant set id as active
<plaintext> plain text fragment <pre> aria-describedby set id as description
R Ruby tags Ruby Markup tags <rb> <rtc> ruby base & container <ruby> aria-posinset specify position in set
RUBY ELEMENTS
<spacer> whitespace use CSS instead aria-setsize specify size of set
<ruby> ruby annotation E.Asian-like chars <strike> strikethrough text <s> <del>
<rp> ruby fallback parenthesis wrapper <tt> teletype text use CSS instead
<rt> ruby text pronunciation, translation... <xmp> code block use < <pre> <code>
CHEAT SHEET

G Groups tags Block elements T Text tags Inline elements I Image tags Picture content
GENERAL GROUP TAGS TEXT SEMANTIC TAGS IMAGES
<div> generic division or layer block <em> emphatized text replace for <i> JPG PNG SVG WEBP JPGXR JPG2000 GIF APNG
<p> text paragraph <strong> important text replace for <b> <img> image simple or legacy fallback
<hr> thematic break <mark> highlight text replace for <u> src link to url image source required
<pre> preformatted text <i> alternate voice/mood legacy tag alt alternative text if no image required
<main> dominant contents <b> span w/o extra purposes legacy tag width height horizontal & vertical size
<blockquote> section with quote <u> non-textual data span legacy tag loading set lazy loading strategy
cite link to url with quotation source <sub> <sup> subscript and superscript autobrowser decides
LISTS & TERMS <small> side comments small print lazycandidate for lazy loading
<ul> <ol> unorderer & orderer list <var> math or programming variable eager load right away
start first value of list <samp> sample from computing system usemap name of image map to use
reversed backwards list <kbd> user input (keyboard shortcut) ismap image is part of server-side map
type 1 a A i I kind of marker <dfn> defining instance of a term decoding sync async auto hint to decode
<li> item from <ul> or <ol> list title full term optional <map> image map used w/ <a> & <area>
value ordinal value of item <abbr> abbreviation or acronym name imagemap used in usemap
<dl> description list container title expansion of abbreviation optional NEXT-GEN IMAGES
<dt> <dd> description term name & value <cite> title of a work book, film, song... <picture> multiple image container
FIGURE & CAPTIONS
<q> quoted group from another source <source> new alternative source image
cite link to source url optional src link to url image source simple mode
<figure> figure or concept
<br> line break visual enter type MIME type optional
<figcaption> caption or legend for figure
<wbr> line break opportunity long words media media query of resource media
SEMANTIC TAGS
<s> no longer accurate/relevant strike text PICTURE <SOURCE> & <IMG> ATTRIBUTES
<article> entity content post, comment... <data> associate machine-data to text
<section> thematic group of content srcset image list candidates comma-sep
value machine-readable value
<nav> section with navigation links width a1.jpg 300w, a2.jpg 600w, ...
<time> associate machine-date to date
<aside> secondary content sidebar, menu density b1.jpg 1x, b2.jpg 2x, ...
datetime machine-readable date-time
<h1> <h2> ... <h6> heading section sizes final rendered width list 640w
<code> fragment of computer code
<header> introductory header group
M Multimedia tags
<footer> section footer group H Hyperlinks Link to another resource
VIDEO OR AUDIO CONTAINER ELEMENTS
<address> contact information group HYPERLINKS & AREA MAP
MP4 WEBM HEVC AV1 OGV ← VIDEO
<a> <area> hyperlink / image map area
MP3 AAC OGG OPUS FLAC WAV ← AUDIO
T Tables tags Tabular data href link to url or filename
TABLE ELEMENTS hreflang code doc language en, es... <video> <audio> media container
download download name empty valid src link to url video audio source
<table> table container
rel alternate author bookmark external help preload hints how much buffering needs
<caption> title of table optional
<thead> table header includes headers license prev next search tag opener nofollow auto browser decides
<tbody> table body includes body data noopener noreferrer metada fetch metadata only
target context place to open link none save bandwidth and no download
<tfoot> table footer includes summary
ping url list space-separated to ping autoplay autoplay only if user interact
COLUMNS
referrerpolicy mode referer behaviour loop restart when finished
<col> <colgroup> col & group of columns
ATTRIBUTES ONLY FOR <AREA> ELEMENT muted silence media by default
span number of columns to span
shape rect circle poly controls show play, pause... controls
ITEMS
coords coords list for shape ONLY FOR <VIDEO> ELEMENT
<tr> table row horizontal container
alt replacement text when no images poster cover image prior to playback
<th> <td> table header & table cell data
width height horizontal & vertical size
colspan number of columns to span
E Edit tags Edit elements playsinline browser try play video inline
rowspan number of rows to span
TEXT SEMANTIC TAGS VIDEO OR AUDIO CHILDREN ELEMENT
headers one or more id of <th> elements
ONLY FOR <TH> ELEMENT <ins> <del> addition or removal from doc <source> new alternative source media
scope auto row col rowgroup colgroup cite link to source quotation optional src link to url media source
abbr short abbreviated description datetime date/time of change optional type MIME type video/mp4; codecs='...'
<track> external subtitles or tracks
T Target destination S Security & Privacy Edit elements src link to url subtitle resource
KEYWORDS & TARGET DESTINATION POLICIES <IMG>, <VIDEO>, <AUDIO>, <LINK> or <SCRIPT> srclang language of the text track
target browser destination crossorigin CORS support label user-visible name of the text track
_self current place same page anonymous use-credentials kind subtitles captions descriptions
_blank new place new tab page referrerpolicy set how referer works chapters metadata
_parent parent place else _self no-referrer no-referrer-when-downgrade default set default enabled track
_top root parent place else _self same-origin origin strict-origin unsafe-url
name custom place iframe or other origin-when-cross-origin strict-origin-when-cross-origin
CHEAT SHEET

E Embedded tags External content S SVG tags Scalar Vectorial Graphics S Scripting tags Javascript elements
EXTERNAL CONTENT (IFRAME) MAIN TAGS SCRIPTING ELEMENTS
<iframe> embeded content <svg> svg container standalone svg <script> include dynamic script
src link to url resource website, file, ... viewBox minx miny width height src link to script.js instead inline script
srcdoc document content html syntax width height viewport size type associate fieldset with a form
name name context for target attribute preserveAspectRatio align option javascript file default .js
text/javascript
loading auto lazy eager lazy load iframe align none x***Y*** Min Mid Max JSON data block file .json
application/json
allowfullscreen allow iframe fullscreen option meet slice module javascript module module .mjs
allowpaymentrequest allow payments <g> related group container nomodule fallback for old browsers
width height horizontal & vertical sizes SVG METADATA defer defer script execution
<IFRAME> SECURITY, PRIVACY & POLICY ATTRIBUTES
<title> short text title alternative async exec script when available
sandbox allow-forms allow-modals
<desc> detailed textual information SECURITY & PRIVACY
allow-orientation-lock allow-pointer-lock
<metadata> metadata elems. container referrerpolicy mode referer behaviour
allow-popups-to-escape-sandbox allow-scripts
CONTENT FOR REUSE crossorigin mode CORS support
allow-same-origin allow-presentation
<defs> referenced elements container integrity verify integrity hash of src file
allow-top-navigation-by-user-activation
SCRIPT DOWNLOAD & PARSE MODES
allow-top-navigation allow-popups
<symbol> set reuse template no render
HTML PARSE FETCH EXEC
allow feature allow access to feature <use> reference another element reuse
SCRIPTS
ambient-light-sensor autoplay accelerometer
href a url link to be cloned for rendering NORMAL
camera display-capture document-domain
<switch> reference another element
encrypted-media fullscreen geolocation
<***> direct child of <switch>
DEFER
gyroscope magnetometer microphone midi
systemLanguage code
payment picture-in-picture speaker sync-xhr BASIC SHAPES
ASYNC
usb wake-lock webauthn vr <rect> define a rectangle
referrerpolicy mode referer behaviour x y horizontal & vertical position MODULES
LEGACY EMBED/OBJECT TAGS width height horizontal & vertical sizes NORMAL
<embed> external non-html content rx ry horizontal & vertical radius
src link to url resource <circle> define a circle ASYNC
type type of embedded resource cx cy horizontal & vertical center coord
width height horizontal & vertical sizes r radius of the circle
<object> external resource multipurpose <ellipse> define a ellipse S Other scripting tags Javascript elements
data link to url resource rx ry horizontal & vertical radius JAVASCRIPT-RELATED TAGS
type type of embedded resource cx cy horizontal & vertical center coord <noscript> show if no scripting enabled
name name context for target attribute <line> define a line segment <template> inert html fragments to clone
usemap name of image map to use x1 y1 start point (x,y) of line segment <slot> create separate DOM trees
form associates element with form id x2 y2 end point (x,y) of line segment name name of shadow tree slot
width height horizontal & vertical sizes pathLength total length of the path <canvas> rendering graphs, art, etc...
<param> external resource multipurpose <polyline> <polygon> line / closed shape width height horizontal & vertical size
name value name & value of parameter points set of coords space-separated <custom-elem> user custom element tag
EXPERIMENTAL TAGS
pathLength total length of the path
TEXT & IMAGE ELEMENTS
S SVG Attrs Style SVG attributes
<portal> guest embedded content ~iframe STYLE SVG ATTRIBUTES
src link to url resource website, file, ... <text> <tspan> text layer & text container FILL SHAPE
referrerpolicy mode referer behaviour x y start position of text
fill black color fills shape with a color
dx dy relative position of descendant
S SVG paths Scalar Vectorial Graphics fill-rule nonzero evenodd algorithm inside
lengthAdjust spacing spacingAndGlyphs
POWERFUL PATHS fill-opacity 1 opacity alpha channel
rotate number rotate degrees per glyph
LINE (STROKE)
<path> define a outline of a shape textLength number length per glyph
d command/coords space-separated <textPath> put text on path stroke none color set color line
pathLength total length of the path path equivalent of d attribute <path> stroke-width 1 width set width line
PATH COMMANDS GUIDE href url reference to <path> stroke-opacity 1 opacity alpha channel
M m Move to path begins · M10,30 startOffset length offset from start path stroke-linecap butt round square limit type
Z z Close path path ends · Z method align stretch how render glyph stroke-linejoin miter miter-clip round bevel arcs
L l Line to draw line · L90,90 spacing exact auto space between glyph stroke-miterlimit 4 number limit on ratio
H h Horiz line to horizontal line · H40 side left right side of the path to render stroke-dasharray none number array pattern
V v Vert line to vertical line · V20 lengthAdjust spacing spacingAndGlyphs stroke-dashoffset 0 number array offset
C c Cubic Bézier C30,90 25,10 50,10 textLength number length per glyph OTHERS (CSS ATTRIBUTES)
S s Smooth C. B. S70,90 90,90 <image> set reference to image transform css transform apply transform
Q q Quadratic Bézier Q90,60 50,90 href a url link to image to rendering class id style html attributes inherit
T t Smooth Q. B. T30,0 30,0 30,0 30,0 preserveAspectRatio align option
A a Elliptical Arc A20,20 0,0,1 50,30 crossorigin CORS support

html5 Cheatsheet 2019 PDF

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

html5 Cheatsheet 2019 PDF

Încărcat de

Drepturi de autor:

Formate disponibile

CHEAT SHEET

HTML5 WEB DEVELOPMENT

HTML5 WEB DEVELOPMENT

HTML5 WEB DEVELOPMENT

HTML5 WEB DEVELOPMENT

S-ar putea să vă placă și