HTML5 Cheatsheet 2019

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 search link to search page url dir ltr rtl auto text direction TWITTER CARDS draggable auto stylesheet imports a css style sheet enable drag and drop <meta> metadata tag for twitter cards URL STRUCTURE RELATION hidden hide element not relevant 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 speech devices that read a page disable google features content-security-policy enforce csp notranslate nositelinkssearchbox content metadata value CHEATSHEET LEGEND rating adult exclude secure search <title> html tag html tag w/o close tag obsolete seo document title viewport optimized-mobile page <base> attribute attribute w/o value set a document base url content="width=device-width, initial-scale=1.0" href value default value values set link to base url to use target context place to open link value for content value part CHEAT SHEET HTML5 WEB DEVELOPMENT Created by @Manz ( https://twitter.com/Manz ) https://lenguajehtml.com/ 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 <button> generic button container USER INPUT DATA 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 form associate input with a form required required field default: optional 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 <applet> java widgets <embed> <object> POWERFUL VALIDATIONS ONLY <INPUT> checkbox radio submit image reset button <acronym> abbreviation <abbr> pattern REGEXP pattern for test validation value current value of input element <basefont> main font use CSS instead size size of element in characters <big> bigger text use CSS font-size A ARIA Attributes Accesible elements list associate with id of <datalist> <bgsound> background sound <audio> ACCESIBLE RICH INTERNET APPLICATIONS accept hint for expected file in upload <blink> flicker text use CSS animation role specify accessible role for element checked enable in radio or checkbox <center> center text use CSS text-align complementary list listitem main navigation

HTML5 Cheatsheet 2019

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support