Transcription of CHEAT SHEET HTML5 WEBDEVELOPMENT - Emezeta.COM
1 CHEATSHEET LEGENDPLAYER METADATA PROPERTIESAPP METADATA PROPERTIESOPTIONAL METADATA PROPERTIESog:audiocomplementary audio urlREQUIRED METADATA PROPERTIES propertymetadata type open graphmetadata tag for open graphFACEBOOK OPEN GRAPH<meta>og:titletitle of your objectog:typetype of your objectog:imageimage url for previewog:urlcanonical & absolute urlmusicvideoarticlebookprofilewebsiteog :description1-2 sentence :determinerword auto, the, a, an, ..og:localelanguage default: en_USog:locale:alternativeothers lang arrayog:site_namegeneral site nameog:videocomplementary video urlcontentmetadata value open graphOPTIONAL METADATA PROPERTIESBASIC METADATA PROPERTIES twitter:cardtype of your objectnamemetadata type twitter cardsmetadata tag for twitter cardsTWITTER CARDS<meta> <title>seo document titleDOCUMENT METADATA<meta>document metadatacharsetencoding utf-8, HINTSURL STRUCTURE RELATIONBASIC RELATIONMICRODATA ATTRIBUTES itemidHINT TO BROWSERGLOBAL ATTRIBUTES accesskeyshortcut key to focusCreated by @Manz ( ) SHEETHTML5 RELATIONSHead tagsHHeader & document metadataMAIN TAGSD ocument tagsDHTML main structure<!
2 DOCTYPE html> HTML5 document<html>document content root tag<head>metadata header related docs<body>page content visible contentDOM / STYLE ATTRIBUTESG lobal AttributesGfor all elementsidelement identifier unique per pageclasselement class multiple per pageslotelement slot reference tocontenteditableltrallow edit elementdirtext directionrtlautodraggableenable drag and dropautoenterenterkeyhintdonegonextprevi oussearchsendvirtual keyb labelhiddenhide element not relevantnoneinputmodetexttelurlemaildeci malnumericsearchcustom-elemiscustom built-in elemtokenitempropid listitemrefitemtypeitemscopelangset content lang en, es, script/stylehash[CSP]spellcheckdisable grammar checkstyleinline CSS styles css propertiestabindex numset element ordertitleset tooltip text mouse hoveryestranslatenodisable translationdata-*custom metadata on elementset global urn unique identifiernew metadata item set microdata genre urlset property & valueset reference to "id"<!
3 -- text without effects on webpage --> <link>document relationrelrelation type with other documentalternatelink to alternate versionauthorlink to author URLcanonicallink to preferred URLdns-prefetchresolve dns domainhelplink to help URLiconlink to favicon URL (tab icon)modulepreloadfetch module maplicensefetch module mapprevprev part URL of series docnextnext part URL of series docpingbacklink to pingback serverpreconnectpre connect to domainprefetchfetch/cache link for futurepreloadfetch/cache link for nowprerenderbackground render pagesearchlink to search page urlstylesheetimports a css style sheethreflink to related documenthreflangdoc language en, type for browsermimescriptasfontaudiodocumentfetc hembedobjectimagestyletrackworkervideosi zestitleset title to stylesheet setencnamename of metadataapplication-nameshort webapp nameauthorname of the page's authordescriptionseo page descriptiongeneratorsoftware used to build webkeywordscomma-separated tagsreferrerdefault page referrer policytheme-colorprimary theme css colorcontentmetadata valuehttp-equivpragma directive (legacy)content-typelegacy alt.
4 To charsetdefault-styledefault stylesheet setrefreshx-ua-compatiblecontent-securit y-policyenforce csphtml redirect 10; URL= compat IE=edge<base>set a document base urlhreflink to base url to useONLY FOR <LINK>, PICTURE <SOURCE> & <STYLE>INLINE STYLESI nline StylingSCSS inline<style>embed css style in a documentmediatitleset title to stylesheet setallprintscreenspeechtypehint type for browsermimeapply to specific devicesall devices computers, devicesall devices - (print + speech)devices that read a pagecodecodetargetplace to open linkcontext<slot>contentmetadata value twitter cardssummary_large_imagesummaryplayerapp twitter:titletitle of your objecttwitter:siteaccount site nametwitter:creatoraccount name @manztwitter:descriptiondescriptiontwitt er:imageabsolute image urlHTML TAG/ATTRIBUTE SYNTAXHTML SyntaxS<tag attribute="value"> content </tag>Tag structureHTML COMMENT SYNTAXC omment SyntaxCSocial metadataSFor social networkstwitter:app:countrycountry codetwitter:app:name.
5 **name of apptwitter:app:id: **identifier of apptwitter:app:url: **url of app storeiphoneipadgoogleplayid for **namemetadata nameGOOGLE SEO RECOMMENDATIONS<title>twitter:playerhttps url to iframe playerfirst - second | brand 50-60 chars<meta>metadata google-supporteddescriptiontext snippet 50-160 charsrobotsallnoindexnofollownonenoarchi venosnippetnoodpnotranslatenoimageindexu navailable_after: dategooglebotset bots behaviourgoogledisable google featuresnotranslatenositelinkssearchboxr atingexclude secure searchadultviewportoptimized-mobile pagehtml taghtml tag w/o close tagattributeattribute w/o valuevaluedefault valuevalues sethint size for favicon 64x64, 96x96value for contentvalue partobsoleteviewporthint to initial size viewportcontent="width=device-width, initial-scale= "Dev annotationsSELECT CHILDREN ELEMENTSC reated by @Manz ( ) SHEETHTML5 ONLY <TEXTAREA> ELEMENTONLY <INPUT> ELEMENTALTER FORM SUBMISSION formassociate input with a formformactionformenctypeONLY IMAGE <INPUT> ELEMENTUSER INPUT DATAMAIN ELEMENTSF ormsFForms related tags<form>form elements collectionnameform name apimethodGETPOST dialogsend methodactionurl to backend form submissionaccept-charsetforce encoding utf-8encautocompleteonoffautofill for all formnovalidatebypass form validationenctypeencoding typeapplication/x-www-form-urlencodedmul tipart/form-datatext/plaintargetplace to put response<label>associate element with captionforreference to of related element<input>specific & large textnameelement name apitypetexthiddensearchtelurlemailnumber rangecolorpasswordfiledatetime-localdate timeweekmonthcheckboxradiosubmitimageres etbuttonvaluecurrent value of input elementsizesize of element in
6 Characterslistassociate with of id<datalist>placeholderuser visual hintsrcurl or name of image buttonaltalternative text to imagewidthimage width/height sizeheightaccepthint for expected file in uploadautocompleteonoffautofill for inputautofocusfocus input when loadedcheckedmultipleallow multiple valuesformmethodformnovalidateformtarget contextInput elementsIUser input typesdirnamesubmit element directionalityenable in radio or checkbox<textarea> <textarea>wrapwrap textrowscolsnumber of lines and columns<input>specific text input short textmultiline text input large textHTML GENERIC <BUTTON>Generic ButtonBHTML Button<button>typegeneric button containersubmitresetbuttonbutton typenameelement name apivaluebutton value for form submissionautofocusfocus button when loadedformassociate input with a formavoid press buttondisabledSELECT ELEMENTSS elect data tagsSInteractive combo<select>form elements collectionnameform name apiautocompleteonoffautofill for inputautofocusfocus input when loadedavoid press buttondisabledformassociate input with a formsizesize of element in charactersrequiredrequired field default.
7 Optionalmultipleallow select multiple values<datalist>predefined and open data list<option>item from or <select> <datalist>options selected by defaultselectedavoid select this item optiondisabledvalueitem value for form submitlabeluser-visible text instead content<optgroup>group of labeluser-visible group textavoid select this itemsdisabled<option>OTHER FORM ELEMENTSI nteractive tagsIOther elements<output>result of calculationnameelement name apiformassociate input with a formforassociate result to other element<progress>show a bar progressvaluecurrent value of bar progressmaxmax value of bar progress<meter>show a known range metervaluecurrent value of meterlowlimit of low rangehighlimit of high rangeminlower bound of rangemaxupper bound of rangeoptimumoptimum value in gaugeGROUP FORMS<fieldset>group of form elementsnameelement name apiformassociate fieldset with a form<legend>avoid select this group itemsdisabledcaption text for fieldsetOTHER INTERACTIVE ELEMENTS<details>openkeep accordion openeddisclosure widget html accordion<summary>caption or title for<details> <dialog>window box container dialog boxopenkeep dialog openedPOWERFUL VALIDATIONSNUMBER VALIDATIONS minmin/max value numbermaxstepgranularity step between valuesavoid edit field not sendGENERAL VALIDATIONSTEXT VALIDATIONS minlengthmin/max lengthpatternpattern for test validationmaxlengthREGEXP requireddisabledreadonlyavoid edit field sendrequired field default.
8 OptionalUSER INPUT DATAONLY <INPUT>ONLY <INPUT> <INPUT> & <TEXTAREA> <INPUT> & <TEXTAREA>ValidationsVHTML validationsRELATIONSHIPS aria-ownsset element as childaria-activedescendantset as activeLABELSACCESIBLE RICH INTERNET APPLICATIONSARIA AttributesAAccesible elementsaria-labelspecify a string as labelaria-labelledbyspecify as label elemidididaria-describedbyset as descriptionidaria-posinsetspecify position in setaria-setsizespecify size of setrolespecify accessible role for elementcomplementarylistlistitemmainnavi gationregiontabalertapplicationarticleba nnerbuttoncellcheckboxcontentinfodialogd ocumentfeedfigureformgridgridcellheading imglistboxrowrowgroupsearchswitchtableta bpaneltextboxtimerDEPRECATED TAGD eprecated tagsDObsolete elements<applet>java widgetsRECOMMENDED TAG<object> <embed> <acronym>abbreviation<abbr> <bgsound>background sound<audio> <dir> <ul> <frame> <iframe> <frameset> <noframes>framesframes fallback no supportedsearch in page<isindex> <input> <keygen>keypair gen use webcrypto APIpreformatted text<listing> <code> <pre> <menuitem>context menu no supported<nextid>auto id generated no supported<noembed> <object>no embed fallbackplain text fragment<plaintext> <pre>ruby base & container<rb> <ruby> <rtc>strikethrough text<strike> <del> <s> <xmp> <code> <pre>code block use <<basefont> <big>main font use CSS insteadbigger text use CSS font-size<blink>flicker text use CSS animation<center>center text use CSS text-align<font>set font features use CSS instead<marquee>move text use CSS animation<multicol>col layout use CSS columns<nobr>no break use CSS instead<spacer>whitespace use CSS instead<tt>teletype text use CSS
9 Insteadaria-checkedaria-selectedset current statetruefalsemixedRUBY ELEMENTSRuby tagsRRuby Markup tags<ruby>ruby annotation chars <rp>ruby fallback parenthesis wrapper<rt>ruby text pronunciation, <INPUT> & <TEXTAREA>idONLY SUBMIT <INPUT> & <BUTTON>attributes to alter main form submissiondirectory list use lists insteadcodetargetplace to open linkcontextITEMSCOLUMNS title of table optionalVIDEO OR AUDIO CHILDREN ELEMENTONLY FOR <VIDEO> ELEMENTNEXT-GEN IMAGESPICTURE <SOURCE> & <IMG> ATTRIBUTESATTRIBUTES ONLY FOR <AREA> ELEMENT expansion of abbreviation optionalfull term optionalFIGURE & CAPTIONS<figure>figure or concept<figcaption>caption or legend for figureLISTS & TERMS<ul>unorderer & orderer listgeneric division or layer blockHYPERLINKS & AREA MAPC reated by @Manz ( ) SHEETHTML5 TEXT SEMANTIC TAGSText tagsTIMAGESI mage tagsIInline elementsPicture content<em>titleSEMANTIC TAGSG roups tagsGBlock elements<article> <picture>multiple image containersrcsrcsettypesizesfinal rendered width list 640wentity content post, <section>thematic group of content<nav>section with navigation links<aside>secondary content sidebar, menu<h1>heading section<h2> <h6>.
10 <header>introductory header group<footer>section footer group<address>contact information groupGENERAL GROUP TAGS<div> <p>text paragraph<hr>thematic break<pre>preformatted text<blockquote>section with quotecitelink to url with quotation source<main>dominant contents<ol>startfirst value of listreversedbackwards listtype1aAiIkind of marker<li>item from or listvalueordinal value of item<ul> <ol> <dl>description list container<dt>description term name & value<dd>emphatized text replace for <i> <strong>important text replace for <b> <mark>highlight text replace for <u> <i>alternate voice/mood legacy tag<b>span w/o extra purposes legacy tag<u>non-textual data span legacy tag<sub>subscript and superscript<sup> <small>side comments small print<var>math or programming variable<samp>sample from computing system<kbd>user input (keyboard shortcut)<dfn>defining instance of a termtitle<abbr>abbreviation or acronym<cite>title of a work book, film, to source url optionalcite<q>quoted group from another source<br>line break visual enter<wbr>line break opportunity long words<s>no longer accurate/relevant strike textmachine-readable valuevalue<data>associate machine-data to textmachine-readable date-timedatetime<time>associate machine-date to date<code>fragment of computer code<a>hyperlink / image map area<area>link to url or filenamehrefhreflangdoc language en.
