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 content 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 HTML5 document document relation og:title title of your object document content root tag href link to related document og:type type of your object
metadata header related docs hreflang code doc language en, es... music video article book 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 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 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 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 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</p><p>Created by @Manz ( https://twitter.com/Manz ) https://lenguajehtml.com/</p><p>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 <a href="/tags/API/" rel="tag">api</a> 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 <a href="/tags/Button_(computing)/" rel="tag">button</a> 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 <a href="/tags/Accordion_(GUI)/" rel="tag">accordion</a> 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> <a href="/tags/Window_(computing)/" rel="tag">window</a> box container <a href="/tags/Dialog_box/" rel="tag">dialog box</a> 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 <a href="/tags/Password/" rel="tag">password</a> DEPRECATED TAG RECOMMENDED TAG step granularity step between values datetime-local date time week month <applet> java widgets <embed> <object> POWERFUL VALIDATIONS ONLY <INPUT> <a href="/tags/Checkbox/" rel="tag">checkbox</a> 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 multiple allow multiple values <dir> directory list use lists instead <ul> region tab alert application article banner ONLY IMAGE <INPUT> ELEMENT <font> set font features use CSS instead button cell checkbox contentinfo dialog src url or name of image button <frame> <frameset> frames <iframe> document feed figure form grid gridcell alt alternative text to image <marquee> move text use CSS animation heading img listbox row rowgroup search width height image width/height size <multicol> col layout use CSS columns switch table tabpanel textbox timer ONLY <TEXTAREA> ELEMENT <noframes> frames fallback no supported aria-checked true false mixed <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 <a href="/tags/Menu_(computing)/" rel="tag">menu</a> 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 HTML5 WEB DEVELOPMENT</p><p>Created by @Manz ( https://twitter.com/Manz ) https://lenguajehtml.com/</p><p>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 auto browser decides LISTS & TERMS <small> side comments small print lazy candidate 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 <q> quoted group from another source FIGURE & CAPTIONS <source> new alternative source image cite link to source url optional <figure> figure or concept src link to url image source simple mode <br> line break visual enter <figcaption> caption or legend for figure type MIME type optional <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 srcset image list candidates comma-sep <section> thematic group of content value machine-readable value width a1.jpg 300w, a2.jpg 600w, ... <nav> section with navigation links <time> associate machine-date to date density b1.jpg 1x, b2.jpg 2x, ... <aside> secondary content <a href="/tags/Sidebar_(computing)/" rel="tag">sidebar</a>, menu datetime machine-readable date-time sizes final rendered width list 640w <h1> <h2> ... <h6> heading section <code> fragment of computer code <header> introductory header group M Multimedia tags <footer> section footer group H <a href="/tags/Hyperlink/" rel="tag">Hyperlinks</a> Link to another resource VIDEO OR AUDIO CONTAINER ELEMENTS <address> contact information group HYPERLINKS & AREA MAP MP4 WEBM HEVC AV1 OGV ← VIDEO <a> <area> <a href="/tags/Hyperlink/" rel="tag">hyperlink</a> / 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 <table> table container download download name empty valid src link to url video audio source <caption> title of table optional rel alternate author bookmark external help preload hints how much buffering needs auto <thead> table header includes headers license prev next search tag opener nofollow browser decides metada <tbody> table body includes body data noopener noreferrer fetch metadata only none <tfoot> table footer includes summary target context place to open link save bandwidth and no download autoplay autoplay only if user interact COLUMNS ping url list space-separated to ping referrerpolicy mode referer behaviour loop restart when finished <col> <colgroup> col & group of columns muted silence media by default span number of columns to span ATTRIBUTES ONLY FOR <AREA> ELEMENT rect circle poly controls show play, pause... controls ITEMS shape coords ONLY FOR <VIDEO> ELEMENT <tr> table row horizontal container coords list for shape alt poster cover image prior to playback <th> <td> table header & table cell data replacement text when no images width height horizontal & vertical size colspan number of columns to span playsinline browser try play video inline rowspan number of rows to span E Edit tags Edit elements headers one or more id of <th> elements TEXT SEMANTIC TAGS VIDEO OR AUDIO CHILDREN ELEMENT 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 HTML5 WEB DEVELOPMENT</p><p>Created by @Manz ( https://twitter.com/Manz ) https://lenguajehtml.com/</p><p>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 text/<a href="/tags/JavaScript/" rel="tag">javascript</a> javascript file default .js loading auto lazy eager lazy load iframe align none x***Y*** Min Mid Max application/json JSON data block file .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 integrity verify integrity hash of src file allow-top-navigation-by-user-activation <defs> referenced elements container SCRIPT DOWNLOAD & PARSE MODES allow-top-navigation allow-popups <symbol> set reuse template no render <use> reference another element reuse HTML PARSE FETCH EXEC allow feature allow access to feature 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 <***> direct child of <switch> encrypted-media fullscreen geolocation DEFER gyroscope magnetometer microphone midi systemLanguage code BASIC SHAPES payment picture-in-picture speaker sync-xhr ASYNC <a href="/tags/USB/" rel="tag">usb</a> wake-lock webauthn vr <rect> define a rectangle</p><p> 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 S SVG Attrs Style SVG attributes <portal> TEXT & IMAGE ELEMENTS 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 fill-rule nonzero evenodd algorithm inside S SVG paths Scalar Vectorial Graphics lengthAdjust spacing spacingAndGlyphs fill-opacity 1 opacity alpha channel POWERFUL PATHS 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</p>
</div>
</article>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
var docId = '19c0a7b8c4bcab96ca4011f12111b46f';
var endPage = 1;
var totalPage = 4;
var pfLoading = false;
window.addEventListener('scroll', function () {
if (pfLoading) return;
var $now = $('.article-imgview .pf').eq(endPage - 1);
if (document.documentElement.scrollTop + $(window).height() > $now.offset().top) {
pfLoading = true;
endPage++;
if (endPage > totalPage) return;
var imgEle = new Image();
var imgsrc = "//data.docslib.org/img/19c0a7b8c4bcab96ca4011f12111b46f-" + endPage + (endPage > 3 ? ".jpg" : ".webp");
imgEle.src = imgsrc;
var $imgLoad = $('<div class="pf" id="pf' + endPage + '"><img src="/loading.gif"></div>');
$('.article-imgview').append($imgLoad);
imgEle.addEventListener('load', function () {
$imgLoad.find('img').attr('src', imgsrc);
pfLoading = false
});
if (endPage < 5) {
adcall('pf' + endPage);
}
}
}, { passive: true });
if (totalPage > 0)
adcall('pf1');
</script>
<script>
var sc_project = 11552861;
var sc_invisible = 1;
var sc_security = "b956b151";
</script>
<script src="https://www.statcounter.com/counter/counter.js" async></script>
</html>
