Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
Guidelines and tips
Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
Community
Ask the community
Ask the community for help and clear up your study doubts
University Rankings
Discover the best universities in your country according to Docsity users
Free resources
Our save-the-student-ebooks!
Download our free guides on studying techniques, anxiety management strategies, and thesis advice from Docsity tutors
A comprehensive list of HTML5 elements and their attributes, including input types, form elements, multimedia elements, and various other tags. Use this cheat sheet to quickly reference the different elements and their uses in web development.
Typology: Study notes
2021/2022
1 / 19
Related documents
Partial preview of the text
Download HTML5 Elements Cheat Sheet and more Study notes Art in PDF only on Docsity! 8/11/2015 Cheat Sheet http://docs.emmet.io/cheat-sheet/ 1/19 nav>ul>li <nav> <ul> <li></li> </ul> </nav> div+p+bq <div></div> <p></p> <blockquote></blockquote> div+div>p>span+em^bq <div></div> <div> <p><span></span><em></em></p> <blockquote></blockquote> </div> div+div>p>span+em^^bq <div></div> <div> <p><span></span><em></em></p> </div> <blockquote></blockquote> div>(header>ul>li*2>a)+footer>p <div> <header> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer> <p></p> </footer> </div> (div>dl>(dt+dd)*3)+footer>p <div> <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> </div> <footer> <p></p> </footer> ul>li*5 <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> Syntax Child: > Sibling: + Climbup: ^ Grouping: () Multiplication: * Item numbering: $ 8/11/2015 Cheat Sheet http://docs.emmet.io/cheat-sheet/ 2/19 ul>li.item$*5 <ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> </ul> h$[title=item$]{Header $}*3 <h1 title="item1">Header 1</h1> <h2 title="item2">Header 2</h2> <h3 title="item3">Header 3</h3> ul>li.item$$$*5 <ul> <li class="item001"></li> <li class="item002"></li> <li class="item003"></li> <li class="item004"></li> <li class="item005"></li> </ul> ul>li.item$@-*5 <ul> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li> </ul> ul>li.item$@3*5 <ul> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> <li class="item7"></li> </ul> #header <div id="header"></div> .title <div class="title"></div> form#search.wide <form id="search" class="wide"></form> p.class1.class2.class3 <p class="class1 class2 class3"></p> p[title="Hello world"] <p title="Hello world"></p> td[rowspan=2 colspan=3 title] <td rowspan="2" colspan="3" title=""></td> [a='value1' b="value2"] <div a="value1" b="value2"></div> a{Click me} <a href="">Click me</a> p>{Click }+a{here}+{ to continue} <p>Click <a href="">here</a> to continue</p> .class <div class="class"></div> em>.class <em><span class="class"></span></em> ul>.class <ul> <li class="class"></li> </ul> table>.row>.col <table> <tr class="row"> <td class="col"></td> </tr> </table> ID and CLASS attributes Custom attributes Text: {} Implicit tag names HTML All unknown abbreviations will be transformed to tag, e.g. foo → <foo></foo>. 8/11/2015 Cheat Sheet http://docs.emmet.io/cheat-sheet/ 5/19 input:button, input:b <input type="button" value=" " /> isindex <isindex /> input:reset Alias of input:button[type=reset] <input type="reset" value=" " /> select <select name=" " id=" "> </select> select:disabled, select:d Alias of select[disabled.] <select name=" " id=" " disabled="disabled"> </select> option, opt <option value=" "> </option> textarea <textarea name=" " id=" " cols=" 30 " rows=" 10 "> </textarea> marquee <marquee behavior=" " direction=" "> </marquee> menu:context, menu:c Alias of menu[type=context]> <menu type="context"> </menu> menu:toolbar, menu:t Alias of menu[type=toolbar]> <menu type="toolbar"> </menu> video <video src=" "> </video> audio <audio src=" "> </audio> html:xml <html xmlns="http://www.w3.org/1999/xhtml"> </html> keygen <keygen /> command <command /> button:submit, button:s, btn:s Alias of button[type=submit] <button type="submit"> </button> button:reset, button:r, btn:r Alias of button[type=reset] <button type="reset"> </button> button:disabled, button:d, btn:d Alias of button[disabled.] <button disabled="disabled"> </button> fieldset:disabled, fieldset:d, fset:d, fst:d Alias of fieldset[disabled.] <fieldset disabled="disabled"> </fieldset> bq Alias of blockquote <blockquote> </blockquote> fig Alias of figure <figure> </figure> figc Alias of figcaption <figcaption> </figcaption> pic Alias of picture <picture> </picture> ifr Alias of iframe <iframe src=" " frameborder="0"> </iframe> emb Alias of embed <embed src=" " type=" " /> obj Alias of object <object data=" " type=" "> </object> cap Alias of caption <caption> </caption> colg Alias of colgroup <colgroup> </colgroup> fst, fset Alias of fieldset <fieldset> </fieldset> btn Alias of button <button> </button> optg Alias of optgroup <optgroup> </optgroup> tarea Alias of textarea <textarea name=" " id=" " cols=" 30 " rows=" 10 "> </textarea> leg Alias of legend <legend> </legend> sect Alias of section <section> </section> 8/11/2015 Cheat Sheet http://docs.emmet.io/cheat-sheet/ 6/19 art Alias of article <article> </article> hdr Alias of header <header> </header> ftr Alias of footer <footer> </footer> adr Alias of address <address> </address> dlg Alias of dialog <dialog> </dialog> str Alias of strong <strong> </strong> prog Alias of progress <progress> </progress> mn Alias of main <main> </main> tem Alias of template <template> </template> datag Alias of datagrid <datagrid> </datagrid> datal Alias of datalist <datalist> </datalist> kg Alias of keygen <keygen /> out Alias of output <output> </output> det Alias of details <details> </details> cmd Alias of command <command /> doc Alias of html> (head>meta[charset=${charset}]+title{${1:D ocument}})+body <html> <head> <meta charset="UTF-8" /> <title> Document </title> </head> <body> </body> </html> 8/11/2015 Cheat Sheet http://docs.emmet.io/cheat-sheet/ 7/19 doc4 Alias of html>(head>meta[http- equiv="Content-Type" content="text/html;charset=${charset}"]+ti tle{${1:Document}})+body <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title> Document </title> </head> <body> </body> </html> ri:dpr, ri:d Alias of img:s <img srcset=" " src=" " alt=" " /> ri:viewport, ri:v Alias of img:z <img sizes=" " srcset=" " src=" " alt=" " /> ri:art, ri:a Alias of pic>src:m+img <picture> <source media="( min-width: )" srcset=" " /> <img src=" " alt=" " /> </picture> ri:type, ri:t Alias of pic>src:t+img <picture> <source srcset=" " type=" image/ " /> <img src=" " alt=" " /> </picture> html:4t Alias of !!!4t+doc4[lang=${lang}] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title> Document </title> </head> <body> </body> </html> html:4s Alias of !!!4s+doc4[lang=${lang}] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title> Document </title> </head> <body> </body> </html> html:xt Alias of !!!xt+doc4[xmlns=http://www.w3.org/1999/xh tml xml:lang=${lang}] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title> Document </title> </head> <body> </body> </html> html:xs Alias of !!!xs+doc4[xmlns=http://www.w3.org/1999/xh tml xml:lang=${lang}] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title> Document </title> </head> <body> </body> </html> 8/11/2015 Cheat Sheet http://docs.emmet.io/cheat-sheet/ 10/19 ovy:v overflow-y:visible; ovy:h overflow-y:hidden; ovy:s overflow-y:scroll; ovy:a overflow-y:auto; ovs overflow-style: scrollbar ; ovs:a overflow-style:auto; ovs:s overflow-style:scrollbar; ovs:p overflow-style:panner; ovs:m overflow-style:move; ovs:mq overflow-style:marquee; zoo, zm zoom:1; cp clip: ; cp:a clip:auto; cp:r clip:rect( top right bottom left ); rsz resize: ; rsz:n resize:none; rsz:b resize:both; rsz:h resize:horizontal; rsz:v resize:vertical; cur cursor:${pointer}; cur:a cursor:auto; cur:d cursor:default; cur:c cursor:crosshair; cur:ha cursor:hand; cur:he cursor:help; cur:m cursor:move; cur:p cursor:pointer; cur:t cursor:text; m margin: ; m:a margin:auto; mt margin-top: ; mt:a margin-top:auto; mr margin-right: ; mr:a margin-right:auto; mb margin-bottom: ; mb:a margin-bottom:auto; ml margin-left: ; ml:a margin-left:auto; p padding: ; pt padding-top: ; pr padding-right: ; pb padding-bottom: ; pl padding-left: ; bxz box-sizing: border-box ; bxz:cb box-sizing:content-box; bxz:bb box-sizing:border-box; bxsh box-shadow: inset hoff voff blur color ; bxsh:r box-shadow: inset hoff voff blur spread rgb( 0 , 0 , 0 ); bxsh:ra box-shadow: inset h v blur spread rgba( 0 , 0 , 0 , . 5 ); bxsh:n box-shadow:none; w width: ; w:a width:auto; h height: ; h:a height:auto; maw max-width: ; maw:n max-width:none; mah max-height: ; mah:n max-height:none; miw min-width: ; mih min-height: ; f font: ; f+ font: 1em Arial,sans-serif ; fw font-weight: ; fw:n font-weight:normal; fw:b font-weight:bold; fw:br font-weight:bolder; fw:lr font-weight:lighter; fs font-style:${italic}; fs:n font-style:normal; fs:i font-style:italic; Margin & Padding Box Sizing Font 8/11/2015 Cheat Sheet http://docs.emmet.io/cheat-sheet/ 11/19 fs:o font-style:oblique; fv font-variant: ; fv:n font-variant:normal; fv:sc font-variant:small-caps; fz font-size: ; fza font-size-adjust: ; fza:n font-size-adjust:none; ff font-family: ; ff:s font-family:serif; ff:ss font-family:sans-serif; ff:c font-family:cursive; ff:f font-family:fantasy; ff:m font-family:monospace; ff:a font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; ff:t font-family: "Times New Roman", Times, Baskerville, Georgia, serif; ff:v font-family: Verdana, Geneva, sans-serif; fef font-effect: ; fef:n font-effect:none; fef:eg font-effect:engrave; fef:eb font-effect:emboss; fef:o font-effect:outline; fem font-emphasize: ; femp font-emphasize-position: ; femp:b font-emphasize-position:before; femp:a font-emphasize-position:after; fems font-emphasize-style: ; fems:n font-emphasize-style:none; fems:ac font-emphasize-style:accent; fems:dt font-emphasize-style:dot; fems:c font-emphasize-style:circle; fems:ds font-emphasize-style:disc; fsm font-smooth: ; fsm:a font-smooth:auto; fsm:n font-smooth:never; fsm:aw font-smooth:always; fst font-stretch: ; fst:n font-stretch:normal; fst:uc font-stretch:ultra-condensed; fst:ec font-stretch:extra-condensed; fst:c font-stretch:condensed; fst:sc font-stretch:semi-condensed; fst:se font-stretch:semi-expanded; fst:e font-stretch:expanded; fst:ee font-stretch:extra-expanded; fst:ue font-stretch:ultra-expanded; va vertical-align: top ; va:sup vertical-align:super; va:t vertical-align:top; va:tt vertical-align:text-top; va:m vertical-align:middle; va:bl vertical-align:baseline; va:b vertical-align:bottom; va:tb vertical-align:text-bottom; va:sub vertical-align:sub; ta text-align: left ; ta:l text-align:left; ta:c text-align:center; ta:r text-align:right; ta:j text-align:justify; ta-lst text-align-last: ; tal:a text-align-last:auto; tal:l text-align-last:left; tal:c text-align-last:center; tal:r text-align-last:right; td text-decoration: none ; td:n text-decoration:none; td:u text-decoration:underline; td:o text-decoration:overline; td:l text-decoration:line-through; te text-emphasis: ; te:n text-emphasis:none; te:ac text-emphasis:accent; te:dt text-emphasis:dot; te:c text-emphasis:circle; te:ds text-emphasis:disc; te:b text-emphasis:before; te:a text-emphasis:after; th text-height: ; th:a text-height:auto; Text 8/11/2015 Cheat Sheet http://docs.emmet.io/cheat-sheet/ 12/19 th:f text-height:font-size; th:t text-height:text-size; th:m text-height:max-size; ti text-indent: ; ti:- text-indent:-9999px; tj text-justify: ; tj:a text-justify:auto; tj:iw text-justify:inter-word; tj:ii text-justify:inter-ideograph; tj:ic text-justify:inter-cluster; tj:d text-justify:distribute; tj:k text-justify:kashida; tj:t text-justify:tibetan; to text-outline: ; to+ text-outline: 0 0 #000 ; to:n text-outline:none; tr text-replace: ; tr:n text-replace:none; tt text-transform: uppercase ; tt:n text-transform:none; tt:c text-transform:capitalize; tt:u text-transform:uppercase; tt:l text-transform:lowercase; tw text-wrap: ; tw:n text-wrap:normal; tw:no text-wrap:none; tw:u text-wrap:unrestricted; tw:s text-wrap:suppress; tsh text-shadow: hoff voff blur #000 ; tsh:r text-shadow: h v blur rgb( 0 , 0 , 0 ); tsh:ra text-shadow: h v blur rgba( 0 , 0 , 0 , . 5 ); tsh+ text-shadow: 0 0 0 #000 ; tsh:n text-shadow:none; lh line-height: ; lts letter-spacing: ; lts-n letter-spacing:normal; whs white-space: ; whs:n white-space:normal; whs:p white-space:pre; whs:nw white-space:nowrap; whs:pw white-space:pre-wrap; whs:pl white-space:pre-line; whsc white-space-collapse: ; whsc:n white-space-collapse:normal; whsc:k white-space-collapse:keep-all; whsc:l white-space-collapse:loose; whsc:bs white-space-collapse:break- strict; whsc:ba white-space-collapse:break-all; wob word-break: ; wob:n word-break:normal; wob:k word-break:keep-all; wob:ba word-break:break-all; wos word-spacing: ; wow word-wrap: ; wow:nm word-wrap:normal; wow:n word-wrap:none; wow:u word-wrap:unrestricted; wow:s word-wrap:suppress; wow:b word-wrap:break-word; bg background:# 000 ; bg+ background: #fff url( ) 0 0 no-repeat ; bg:n background:none; bgc background-color:# fff ; bgc:t background-color:transparent; bgi background-image:url( ); bgi:n background-image:none; bgr background-repeat: ; bgr:n background-repeat:no-repeat; bgr:x background-repeat:repeat-x; bgr:y background-repeat:repeat-y; bgr:sp background-repeat:space; bgr:rd background-repeat:round; bga background-attachment: ; bga:f background-attachment:fixed; bga:s background-attachment:scroll; bgp background-position: 0 0 ; bgpx background-position-x: ; bgpy background-position-y: ; Background 8/11/2015 Cheat Sheet http://docs.emmet.io/cheat-sheet/ 15/19 bdbc border-bottom-color:# 000 ; bdbc:t border-bottom-color:transparent; bdl, bl border-left: ; bdl+ border-left: 1px solid #000 ; bdl:n border-left:none; bdlw border-left-width: ; bdls border-left-style: ; bdls:n border-left-style:none; bdlc border-left-color:# 000 ; bdlc:t border-left-color:transparent; bdrs border-radius: ; bdtrrs border-top-right-radius: ; bdtlrs border-top-left-radius: ; bdbrrs border-bottom-right-radius: ; bdblrs border-bottom-left-radius: ; lis list-style: ; lis:n list-style:none; lisp list-style-position: ; lisp:i list-style-position:inside; lisp:o list-style-position:outside; list list-style-type: ; list:n list-style-type:none; list:d list-style-type:disc; list:c list-style-type:circle; list:s list-style-type:square; list:dc list-style-type:decimal; list:dclz list-style-type:decimal-leading- zero; list:lr list-style-type:lower-roman; list:ur list-style-type:upper-roman; lisi list-style-image: ; lisi:n list-style-image:none; pgbb page-break-before: ; pgbb:au page-break-before:auto; pgbb:al page-break-before:always; pgbb:l page-break-before:left; pgbb:r page-break-before:right; pgbi page-break-inside: ; pgbi:au page-break-inside:auto; pgbi:av page-break-inside:avoid; pgba page-break-after: ; pgba:au page-break-after:auto; pgba:al page-break-after:always; pgba:l page-break-after:left; pgba:r page-break-after:right; orp orphans: ; wid widows: ; ! !important @f @font-face { font-family: ; src:url(|); } @f+ @font-face { font-family: ' FontName '; src: url(' FileName .eot'); src: url(' FileName .eot? #iefix') format('embedded- opentype'), url(' FileName .woff') format('woff'), url(' FileName .ttf') format('truetype'), url(' FileName .svg# FontName ') format('svg'); font-style: normal ; font-weight: normal ; } Lists Print Others 8/11/2015 Cheat Sheet http://docs.emmet.io/cheat-sheet/ 16/19 @i, @import @import url( ); @kf @-webkit-keyframes identifier { from { } to { } } @-o-keyframes identifier { from { } to { } } @-moz-keyframes identifier { from { } to { } } @keyframes identifier { from { } to { } } @m, @media @media screen { } ac align-content: ; ac:c align-content:center; ac:fe align-content:flex-end; ac:fs align-content:flex-start; ac:s align-content:stretch; ac:sa align-content:space-around; ac:sb align-content:space-between; ai align-items: ; ai:b align-items:baseline; ai:c align-items:center; ai:fe align-items:flex-end; ai:fs align-items:flex-start; ai:s align-items:stretch; anim animation: ; anim- animation: name duration timing-function delay iteration-count direction fill-mode ; animdel animation-delay: time ; animdir animation-direction: normal ; animdir:a animation-direction:alternate; animdir:ar animation-direction:alternate- reverse; animdir:n animation-direction:normal; animdir:r animation-direction:reverse; animdur animation-duration: 0 s; animfm animation-fill-mode: both ; animfm:b animation-fill-mode:backwards; animfm:bt, animfm:bh animation-fill- mode:both; animfm:f animation-fill-mode:forwards; animic animation-iteration-count: 1 ; animic:i animation-iteration- count:infinite; animn animation-name: none ; animps animation-play-state: running ; animps:p animation-play-state:paused; animps:r animation-play-state:running; animtf animation-timing-function: linear ; animtf:cb animation-timing-function:cubic- bezier( 0.1 , 0.7 , 1.0 , 0.1 ); animtf:e animation-timing-function:ease; animtf:ei animation-timing-function:ease- in; animtf:eio animation-timing-function:ease- in-out; animtf:eo animation-timing-function:ease- out; animtf:l animation-timing-function:linear; ap appearance:${none}; as align-self: ; as:a align-self:auto; as:b align-self:baseline; as:c align-self:center; as:fe align-self:flex-end; as:fs align-self:flex-start; as:s align-self:stretch; bfv backface-visibility: ; bfv:h backface-visibility:hidden; bfv:v backface-visibility:visible; 8/11/2015 Cheat Sheet http://docs.emmet.io/cheat-sheet/ 17/19 bg:ie filter:progid:DXImageTransform.Mi crosoft.AlphaImageLoader(src=' x .png',sizingMethod=' crop '); cm /* ${child} */ colm columns: ; colmc column-count: ; colmf column-fill: ; colmg column-gap: ; colmr column-rule: ; colmrc column-rule-color: ; colmrs column-rule-style: ; colmrw column-rule-width: ; colms column-span: ; colmw column-width: ; d:ib+ display: inline-block; *display: inline; *zoom: 1; fx flex: ; fxb flex-basis: ; fxd flex-direction: ; fxd:c flex-direction:column; fxd:cr flex-direction:column-reverse; fxd:r flex-direction:row; fxd:rr flex-direction:row-reverse; fxf flex-flow: ; fxg flex-grow: ; fxsh flex-shrink: ; fxw flex-wrap: ; fxw:n flex-wrap:nowrap; fxw:w flex-wrap:wrap; fxw:wr flex-wrap:wrap-reverse; jc justify-content: ; jc:c justify-content:center; jc:fe justify-content:flex-end; jc:fs justify-content:flex-start; jc:sa justify-content:space-around; jc:sb justify-content:space-between; mar max-resolution: res ; mir min-resolution: res ; op+ opacity: ; filter: alpha(opacity= ); op:ie filter:progid:DXImageTransform.Mi crosoft.Alpha(Opacity=100); op:ms -ms- filter:'progid:DXImageTransform.M icrosoft.Alpha(Opacity=100)'; ord order: ; ori orientation: ; ori:l orientation:landscape; ori:p orientation:portrait; tov text-overflow:${ellipsis}; tov:c text-overflow:clip; tov:e text-overflow:ellipsis; trf transform: ; trf:r transform: rotate( angle ); trf:rx transform: rotateX( angle ); trf:ry transform: rotateY( angle ); trf:rz transform: rotateZ( angle ); trf:sc transform: scale( x , y ); trf:sc3 transform: scale3d( x , y , z ); trf:scx transform: scaleX( x ); trf:scy transform: scaleY( y ); trf:scz transform: scaleZ( z ); trf:skx transform: skewX( angle ); trf:sky transform: skewY( angle ); trf:t transform: translate( x , y ); trf:t3 transform: translate3d( tx , ty , tz ); trf:tx transform: translateX( x ); trf:ty transform: translateY( y ); trf:tz transform: translateZ( z ); trfo transform-origin: ; trfs transform-style: preserve-3d ; trs transition: prop time ; trsde transition-delay: time ; trsdu transition-duration: time ; trsp transition-property: prop ; trstf transition-timing-function: tfunc ; us user-select:${none}; wfsm -webkit-font- smoothing:${antialiased};
Copyright © 2024 Ladybird Srl - Via Leonardo da Vinci 16, 10126, Torino, Italy - VAT 10816460017 - All rights reserved