(X)HTML Best Practice Cheat Sheet All elements d e are sorted with- c la in their groups p l l e ty s in prioritized a a ] li e n t le R i e n t [ b u o e o e b / i s c order. Recom- i ti s l s s n t s i ]a a g i i e t e c n s a t s s i T i r r mended c c s [ m e i n m i n m / r n c e a r a a tr a a a a s e t r r r r e ]o c (X)HTML ver- s t f s t f B 0 n e A e w p . li N c p 1 1 1 0 0 0 1 1 0 [ m i o sions are mint- ...... 5 n / & t s r a 2 0 0 0 1 1 1 ] c c e b . . . . 1 1 2 L [I le i y t d 3 4 / t t a 4 4 L L L L L L b i r o le e colored. M k i n il n l L L L L T c s a p b y M M M M M M i b t t M M M M T T T T T T H o v O a ) ]l m a s t s T T T T H H H H H H n e s e E o n X ] H H H H X X X X X X ( [B [I S U B S N U Element Standards Information Document structure            B N            I The main            B N Margin: 8px; content The docu- Highly ranked Make unique for            I ments title or and will be the Text on the title-bar every page name link-text Only ”name = <meta>            I 'description'” is useful Indicates explicit relationship between this docu- <link>            I ment and other resources. As such there are many good uses! External style <style>            I sheets are usually best Unobtrusive Keep scripts ex- Test for capabili- Script may have <script>           I DOM-scripts, ternal ties, not browsers! output please! Unnecessary with unobtrusive script- Not ignored by true <noscript>         s I* I ing techniques! Forbidden in XHTML XML parsers! 5. Ignored by MSIE <base>           I for scripts <basefont>  D D I Use CSS Non element markup constructs Better skip. It will put MSIE <= 6 in quirks mode and is NOT obligatory. In XML declara- <?xml ?>       s I theory best place to specify encoding for offline usage of an XHTML docu- tion ment. What flavour Required in every Will control stan- <!DOCTYPE>            I of (X)HTML is version since dards compliance used? HTML 2.0! or <a href="/tags/Quirks_mode/" rel="tag">quirks mode</a> Use richly while Code com- MSIE has condi- <!-- -->            I learning and de- ment tional comments veloping Unparsed Use for inline Opera may ignore <![CDATA[ ]]> D D D D       s I character JavaScript in CSS if MIME is data XHTML true XHTML</p><p>Copyright: Lars Gunther. Creative Commons: Attribution-NonCommercial-ShareAlike 2.5 Page 1 Version: 1.09 http://creativecommons.org/licenses/by-nc-sa/2.5/ (X)HTML Best Practice Cheat Sheet All elements d e are sorted with- c la in their groups p l l e ty s in prioritized a a ] li e n t le R i e n t [ b u o e o e b / i s c order. Recom- i ti s l s s n t s i ]a a g i i e t e c n s a t s s i T i r r mended c c s [ m e i n m i n m / r n c e a r a a tr a a a a s e t r r r r e ]o c (X)HTML ver- s t f s t f B 0 n e A e w p . li N c p 1 1 1 0 0 0 1 1 0 [ m i o sions are mint- ...... 5 n / & t s r a 2 0 0 0 1 1 1 ] c c e b . . . . 1 1 2 L [I le i y t d 3 4 / t t a 4 4 L L L L L L b i r o le e colored. M k i n il n l L L L L T c s a p b y M M M M M M i b t t M M M M T T T T T T H o v O a ) ]l m a s t s T T T T H H H H H H n e s e E o n X ] H H H H X X X X X X ( [B [I S U B S N U Element Standards Information Basic semantics Large bold text, Use in correct or- <h1> to <h6>            B N Heading Highly ranked gradually smaller. der Margin-top/bottom The hgroup element represents the heading of a section. The element is used to group a set of h1– <hgroup>  B N h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines. <p>            B N Paragraph Margin-top: 1em; Emphasized Usually spoken Do not equate with <em>            I N Italics text louder ”italics” Emphasised words may get Strongly em- Usually spoken Do not equate with <strong>            I N higher ranking. Bolder phasised text really loud! ”bold” <abbr>           I N Abbreviation ”All acronyms are abbreviations”. Not in MSIE abbr[title], acro- Make sure they are not confused with nym[title] { border- links. CSS-speech: Spell out ini- bottom: dotted 1px; <acronym>         I N Acronym tialisms. ] Do not equate with Indented right and <blockquote>            B N Longer quote ”indentation” left. No quotation <q>           I N Short quote Quotation marks marks in MSIE Not the quote as <cite>            I N Who is cited Italics such Better turn under- <ins>         I* N Inserted text Underlined lining off <del>         I* N Deleted text Strike through <dfn>            I N Defined word Italics Probably like h1, <h>  B N Heading Use with ”section” h2, etc. Marked or In future, use to highlight matches to <mark>  I N highlighted search string text Hypertext rel=”nofollow” Link text should means it will not be understand- increase targets Any element with Blue underlined able out of con- page rank. <a>            I N Link an id can replace text. Images get a text. May contain rel=”canonical” its use as ”anchor” blue border. block elements in marks the pre- (X)HTML 5. ferred URL for a resource.</p><p>Copyright: Lars Gunther. Creative Commons: Attribution-NonCommercial-ShareAlike 2.5 Page 2 Version: 1.09 http://creativecommons.org/licenses/by-nc-sa/2.5/ (X)HTML Best Practice Cheat Sheet All elements d e are sorted with- c la in their groups p l l e ty s in prioritized a a ] li e n t le R i e n t [ b u o e o e b / i s c order. Recom- i ti s l s s n t s i ]a a g i i e t e c n s a t s s i T i r r mended c c s [ m e i n m i n m / r n c e a r a a tr a a a a s e t r r r r e ]o c (X)HTML ver- s t f s t f B 0 n e A e w p . li N c p 1 1 1 0 0 0 1 1 0 [ m i o sions are mint- ...... 5 n / & t s r a 2 0 0 0 1 1 1 ] c c e b . . . . 1 1 2 L [I le i y t d 3 4 / t t a 4 4 L L L L L L b i r o le e colored. M k i n il n l L L L L T c s a p b y M M M M M M i b t t M M M M T T T T T T H o v O a ) ]l m a s t s T T T T H H H H H H n e s e E o n X ] H H H H X X X X X X ( [B [I S U B S N U Element Standards Information Page structure <div>            B N Part of page Avoid ”divitis” Is a semantic el- Avoid ”spanma- <span>           I N ement available? nia” If so, use that in- May override <pre>            B N stead. Preformatted ”width” in MSIE Do not use for Color' for MSIE, Thematic <hr>           B R visual purposes 'background-color' A bar break only. for Gecko Always use hCard for addresses, but Contact in- <address>           B N in combination with <address> for Italics formation contact info. Document or Section takes pri- Does not equal <section>   B R application ority over h1-h6 <div> section Stand alone <article>  B N capable sec- tion ”tangentially <aside>  B N related to the content” The header element represents a group of introductory or navi- Today: Good val- gational aids. A header element ues for id or class typically contains the section's attributes! <header>  B N heading (an h1–h6 element or an hgroup element), but can also contain other content, such as a table of contents, a search form, or any relevant logos. Footer for a <footer>  B N section Caption will prob- Proposed re- Paragraph ably be mandated. <figure>  B R placement for with a caption Content may be a misuse of fieldset' image. <headings>  Set a heading</p><p><listing> D B (Parsed as CDA- TA, preserved <xmp> D B whitespace)</p><p>Copyright: Lars Gunther. Creative Commons: Attribution-NonCommercial-ShareAlike 2.5 Page 3 Version: 1.09 http://creativecommons.org/licenses/by-nc-sa/2.5/ (X)HTML Best Practice Cheat Sheet All elements d e are sorted with- c la in their groups p l l e ty s in prioritized a a ] li e n t le R i e n t [ b u o e o e b / i s c order. Recom- i ti s l s s n t s i ]a a g i i e t e c n s a t s s i T i r r mended c c s [ m e i n m i n m / r n c e a r a a tr a a a a s e t r r r r e ]o c (X)HTML ver- s t f s t f B 0 n e A e w p . li N c p 1 1 1 0 0 0 1 1 0 [ m i o sions are mint- ...... 5 n / & t s r a 2 0 0 0 1 1 1 ] c c e b . . . . 1 1 2 L [I le i y t d 3 4 / t t a 4 4 L L L L L L b i r o le e colored. M k i n il n l L L L L T c s a p b y M M M M M M i b t t M M M M T T T T T T H o v O a ) ]l m a s t s T T T T H H H H H H n e s e E o n X ] H H H H X X X X X X ( [B [I S U B S N U Element Standards Information Visual formatting <br>           I N (Line break) Line break May be only op- <b>           I N tion for a WYSI- May get a sligthly Bolder WYG editor <i>           I N elevated rank Italics <sub>            I N Subscript E.g. Use with simple math, footnotes, <sup>            I N Superscript and when part of language idiom. <big>          I N Bigger (”Smallprint” <small>           I N in (X)HTML Smaller 5) <tt>          I N Fixed width font Centers every- <center> D D D D B N Use CSS thing! Changes font set- <font>  D D D D s I N tings Avoid underlining always (even with <u>  D D D D I N Underlined CSS), since it will look like a link. <s> D D D D I N Use CSS or <del> Strike through <strike>  D D D D I N NS 4 proprietary, No line breaks in <nobr> I N Use CSS instead but works in all cell Suggestion for line <wbr> I N MSIE proprietary break.</p><p>Copyright: Lars Gunther. Creative Commons: Attribution-NonCommercial-ShareAlike 2.5 Page 4 Version: 1.09 http://creativecommons.org/licenses/by-nc-sa/2.5/ (X)HTML Best Practice Cheat Sheet All elements d e are sorted with- c la in their groups p l l e ty s in prioritized a a ] li e n t le R i e n t [ b u o e o e b / i s c order. Recom- i ti s l s s n t s i ]a a g i i e t e c n s a t s s i T i r r mended c c s [ m e i n m i n m / r n c e a r a a tr a a a a s e t r r r r e ]o c (X)HTML ver- s t f s t f B 0 n e A e w p . li N c p 1 1 1 0 0 0 1 1 0 [ m i o sions are mint- ...... 5 n / & t s r a 2 0 0 0 1 1 1 ] c c e b . . . . 1 1 2 L [I le i y t d 3 4 / t t a 4 4 L L L L L L b i r o le e colored. M k i n il n l L L L L T c s a p b y M M M M M M i b t t M M M M T T T T T T H o v O a ) ]l m a s t s T T T T H H H H H H n e s e E o n X ] H H H H X X X X X X ( [B [I S U B S N U Element Standards Information Tables Describe format <table>            T N Tabular data Not for layout Visible borders with ”summary” <tr>            T N Table row Heading for Use ”scope” or Table cell with <th>            T N row or col- ”headers/id” bold, centered text umn <td>            T N Table data A table cell Often a good idea Centered above <caption>            T N Table caption Hard to style to have the table Repeats on each <thead>          T N Table head Can be used in- page when printing stead of grouping MSIE needs this <tbody>          T N Table body <tr> with the class one for dynamical- attribute ly created tables <tfoot>          T N Table footer</p><p><col>          T I Table column MSIE catches too many style-rules! Group of col- Safari does not <colgroup>          T I umns support colgroup</p><p>Copyright: Lars Gunther. Creative Commons: Attribution-NonCommercial-ShareAlike 2.5 Page 5 Version: 1.09 http://creativecommons.org/licenses/by-nc-sa/2.5/ (X)HTML Best Practice Cheat Sheet All elements d e are sorted with- c la in their groups p l l e ty s in prioritized a a ] li e n t le R i e n t [ b u o e o e b / i s c order. Recom- i ti s l s s n t s i ]a a g i i e t e c n s a t s s i T i r r mended c c s [ m e i n m i n m / r n c e a r a a tr a a a a s e t r r r r e ]o c (X)HTML ver- s t f s t f B 0 n e A e w p . li N c p 1 1 1 0 0 0 1 1 0 [ m i o sions are mint- ...... 5 n / & t s r a 2 0 0 0 1 1 1 ] c c e b . . . . 1 1 2 L [I le i y t d 3 4 / t t a 4 4 L L L L L L b i r o le e colored. M k i n il n l L L L L T c s a p b y M M M M M M i b t t M M M M T T T T T T H o v O a ) ]l m a s t s T T T T H H H H H H n e s e E o n X ] H H H H X X X X X X ( [B [I S U B S N U Element Standards Information Forms (& application-type elements) Do not emulate Normally use the Spiders do not <form>           B N A form links POST method 'follow' forms <input>           I R Input widget Input widget (Almost) every form control should Explanation have a label. Significant increase of <label>           I N for form-con- clickable area for checkboxes and trols radio buttons. Tip: add CSS-rule ”cursor: pointer;” <textarea>           I R Enter text Textarea widget Flexible but- JS for progressive <button>         I R Button widget ton enhancement Group of Logical groups of Border, maybe <fieldset>          B N form-ele- form controls in- rounded corners ments crease usability It might be re- Heading for peated for each Text in the top <legend>          B N group of form control in speech border elements synthesis. Multiple selects <select>           I R Drop down list are confusing Menus done with Multiple select widgets will <option>           R Item in such list choice input not be followed by Used sensibly spiders Group of such <optgroup>          R they help items (Expands to "This is a search- <form> able index." + A <isindex>  D D D D B R Precursor of form containing textfield between <input>) two <hr></p><p>Copyright: Lars Gunther. Creative Commons: Attribution-NonCommercial-ShareAlike 2.5 Page 6 Version: 1.09 http://creativecommons.org/licenses/by-nc-sa/2.5/ (X)HTML Best Practice Cheat Sheet All elements d e are sorted with- c la in their groups p l l e ty s in prioritized a a ] li e n t le R i e n t [ b u o e o e b / i s c order. Recom- i ti s l s s n t s i ]a a g i i e t e c n s a t s s i T i r r mended c c s [ m e i n m i n m / r n c e a r a a tr a a a a s e t r r r r e ]o c (X)HTML ver- s t f s t f B 0 n e A e w p . li N c p 1 1 1 0 0 0 1 1 0 [ m i o sions are mint- ...... 5 n / & t s r a 2 0 0 0 1 1 1 ] c c e b . . . . 1 1 2 L [I le i y t d 3 4 / t t a 4 4 L L L L L L b i r o le e colored. M k i n il n l L L L L T c s a p b y M M M M M M i b t t M M M M T T T T T T H o v O a ) ]l m a s t s T T T T H H H H H H n e s e E o n X ] H H H H X X X X X X ( [B [I S U B S N U Element Standards Information Web applications No browser sup- Button, radiobutton <command>  I R A command the user can invoke port this yet (2008- or checkbox 08-04) <datalist>  I A list of suggested values for a form control. Use with <option>. ”Advisory or transient information...” (D. Goodman) ”Considered to be Opera 9 is the first <output>  I Unstyled text a form control for the purposes of the DOM” (Spec) browser to support Additional information or controls which the user can obtain on de- these, but that <details>  B N mand support is only pre- List of commands. Returns in (X)HTML 5, with a wider usage than liminary. Most <menu>  D D D D  B N Like <ul> pure navigation. functionality can be implemented <meter>  I R/N A scalar measurement within a known range. through Not decided as of <progress>  I R/N A progress bar. (Do not confuse with <meter>) JavaScript. Jan -07 <time>  I N A date and/or time of day Currently (June A key pair -09) only support- Selectable list of <keygen>  I R generator ed by Gecko and key sizes. control Opera</p><p>Copyright: Lars Gunther. Creative Commons: Attribution-NonCommercial-ShareAlike 2.5 Page 7 Version: 1.09 http://creativecommons.org/licenses/by-nc-sa/2.5/ (X)HTML Best Practice Cheat Sheet All elements d e are sorted with- c la in their groups p l l e ty s in prioritized a a ] li e n t le R i e n t [ b u o e o e b / i s c order. Recom- i ti s l s s n t s i ]a a g i i e t e c n s a t s s i T i r r mended c c s [ m e i n m i n m / r n c e a r a a tr a a a a s e t r r r r e ]o c (X)HTML ver- s t f s t f B 0 n e A e w p . li N c p 1 1 1 0 0 0 1 1 0 [ m i o sions are mint- ...... 5 n / & t s r a 2 0 0 0 1 1 1 ] c c e b . . . . 1 1 2 L [I le i y t d 3 4 / t t a 4 4 L L L L L L b i r o le e colored. M k i n il n l L L L L T c s a p b y M M M M M M i b t t M M M M T T T T T T H o v O a ) ]l m a s t s T T T T H H H H H H n e s e E o n X ] H H H H X X X X X X ( [B [I S U B S N U Element Standards Information Lists Unordered Do not use for in- Bullet list, left in- <ul>            B N list Lists should be dentation only dentation Numbered list, left <ol>            B N Ordered list used as much as possible. Many indentation <li>            B N List item things, e.g. Item in list <dl>            B N Definition list Menus, are really W3C says use for Definition lists. List are easy dialogue and other Used for ”define” <dt>            B N term to scan and easy not obvious pur- commands in Definition to see. poses, others dis- Google 40px left indenta- <dd>            B N data agree. tion Groups <dt> <di>  B N and <dd> Navigation <nl>  B N list Will replace skip Bots will (in the links. Not really a Use ARIA land- Navigation future) know that No support yet <nav>  B N list. Put here for mark roles and section navigation is not (2009-08-15) comparison with skiplinks today. primary content. <nl>. Directory list- <dir>  D D D D B N Use <ul> or <ol> Like <ul> ing Coding & formulas Use with CSS- Computer rule: ”white-space: Syntax highlight <code>            I N Monospaced code pre;” or the pre el- with CSS-classes ement Not (only) a ”vari- <var>            I N Variable data able” in program- Italics ming Represents <kbd>            I N Monospaced user input Output from <samp>            I N Monospaced computer</p><p>Copyright: Lars Gunther. Creative Commons: Attribution-NonCommercial-ShareAlike 2.5 Page 8 Version: 1.09 http://creativecommons.org/licenses/by-nc-sa/2.5/ (X)HTML Best Practice Cheat Sheet All elements d e are sorted with- c la in their groups p l l e ty s in prioritized a a ] li e n t le R i e n t [ b u o e o e b / i s c order. Recom- i ti s l s s n t s i ]a a g i i e t e c n s a t s s i T i r r mended c c s [ m e i n m i n m / r n c e a r a a tr a a a a s e t r r r r e ]o c (X)HTML ver- s t f s t f B 0 n e A e w p . li N c p 1 1 1 0 0 0 1 1 0 [ m i o sions are mint- ...... 5 n / & t s r a 2 0 0 0 1 1 1 ] c c e b . . . . 1 1 2 L [I le i y t d 3 4 / t t a 4 4 L L L L L L b i r o le e colored. M k i n il n l L L L L T c s a p b y M M M M M M i b t t M M M M T T T T T T H o v O a ) ]l m a s t s T T T T H H H H H H n e s e E o n X ] H H H H X X X X X X ( [B [I S U B S N U Element Standards Information Objects, multimedia, etc. The alt attribute Do use the alt-at- Use CSS for dec- <img>            I R Image will be indexed for (An image) tribute, but wisely orative images. image searches (object that Often bad support Use (X)HTML, Content in objects normally re- for fallback con- (Animation, applet, <object>           I* R CSS and DOM- usually will not be qures a plug tent. MSIE will etc) scripts if possible. indexed in) treat as ActiveX. <param>           I Already supported Animation – blank Provide fallback <canvas>  I* R by many, but not until script starts content MSIE drawing (Animation, video, <embed>  I R Allowed in HTML sound) 5, but still inferior (Fallback for em- <noembed> I* I to <object> bed) Controls may be <audio>  I R Audio stream Ogg, Vorbis and shown Theora must be Video or Video + controls <video>  I R supported. Apple movie may be shown likes QT, MSIE Alternative formats for <audio> or <video>, where <source>  I wma/wmv the UA chooses the best one <applet>  D D D D I R Use <object> Java applet <map>          I Avoid imagemaps! If you must have <area>          I one, use the title attribute! MSIE proprietary, <marquee> B N Avoid flickering Do not use. Use but supported by Scrolling text unobtrusive DOM- most scripts for behav- NS proprietary, <blink> I N Avoid flickering iour. Blinking text works in Opera Use the object el- <bgsound> I A nuisance! MSIE proprietary Plays a sound ement Frames <frameset>    B N <frame>    B R Do not use frames! If you must, use the title attribute! New nested Only option for rich Consider using <object> instead of iframe. HTML 5 introduces <iframe>       B R browsing con- text editing in seamless frames text Gecko <= 1.8.1 Provide meaningful content and links to the framed con- <noframes>      B I tent. Not ”you need a better browser”!</p><p>Copyright: Lars Gunther. Creative Commons: Attribution-NonCommercial-ShareAlike 2.5 Page 9 Version: 1.09 http://creativecommons.org/licenses/by-nc-sa/2.5/ (X)HTML Best Practice Cheat Sheet All elements d e are sorted with- c la in their groups p l l e ty s in prioritized a a ] li e n t le R i e n t [ b u o e o e b / i s c order. Recom- i ti s l s s n t s i ]a a g i i e t e c n s a t s s i T i r r mended c c s [ m e i n m i n m / r n c e a r a a tr a a a a s e t r r r r e ]o c (X)HTML ver- s t f s t f B 0 n e A e w p . li N c p 1 1 1 0 0 0 1 1 0 [ m i o sions are mint- ...... 5 n / & t s r a 2 0 0 0 1 1 1 ] c c e b . . . . 1 1 2 L [I le i y t d 3 4 / t t a 4 4 L L L L L L b i r o le e colored. M k i n il n l L L L L T c s a p b y M M M M M M i b t t M M M M T T T T T T H o v O a ) ]l m a s t s T T T T H H H H H H n e s e E o n X ] H H H H X X X X X X ( [B [I S U B S N U Element Standards Information Miscellaneous Do think about Probably better to <bdo>         I N i18n issues use CSS (Stop treat Keep it forgotten! Used to be some, <plaintext> D B N code as For some uses, Monospaced but who cares? HTML) see CDATA. Ruby overall <ruby>    I N container Ruby base <rbc>   ? I N container Ruby text MSIE 5+ is current- <rtc>   ? I N container ly the only browser that has support <rb>   ? I N Ruby base for ruby, but it is <rt>    I N Ruby text not complete. Denotes ”fall- <rp>    I N back” charac- ters for ruby Uncommon proprietary elements</p><p><layer> (DHTML lay- NS 4 proprietary, <nolayer> er + fallback) DHTML era prac- Forget these! not supported by tices stink! There never will any other browser (Used to be like <ilayer> (inline layer) be a situation (partial in Safari) where they will iframe) solve any real MSIE proprietary, contents will be (Alternative to shown in all other browsers but Opera! <comment> problem. <!-- -->) Anonymous elements will be part of the DOM in HTML 5. (XML data is- <xml> MSIE only land) (Used to be: en- CSS 3 will have ders content in <multicol> columns NS 3 and 4 propri- evenly spaced col- etary umns) (Used to be like a <spacer> Use CSS spacer gif)</p><p>Copyright: Lars Gunther. Creative Commons: Attribution-NonCommercial-ShareAlike 2.5 Page 10 Version: 1.09 http://creativecommons.org/licenses/by-nc-sa/2.5/ (X)HTML Best Practice Cheat Sheet All elements d e are sorted with- c la in their groups p l l e ty s in prioritized a a ] li e n t le R i e n t [ b u o e o e b / i s c order. Recom- i ti s l s s n t s i ]a a g i i e t e c n s a t s s i T i r r mended c c s [ m e i n m i n m / r n c e a r a a tr a a a a s e t r r r r e ]o c (X)HTML ver- s t f s t f B 0 n e A e w p . li N c p 1 1 1 0 0 0 1 1 0 [ m i o sions are mint- ...... 5 n / & t s r a 2 0 0 0 1 1 1 ] c c e b . . . . 1 1 2 L [I le i y t d 3 4 / t t a 4 4 L L L L L L b i r o le e colored. M k i n il n l L L L L T c s a p b y M M M M M M i b t t M M M M T T T T T T H o v O a ) ]l m a s t s T T T T H H H H H H n e s e E o n X ] H H H H X X X X X X ( [B [I S U B S N U Element Standards Information</p><p>Official information: Key and explanations HTML 2.0 spec http://ftp.ics.uci.edu/pub/ietf/html/rfc1866.txt  In standard HTML 3.2 spec http://www.w3.org/TR/REC-html32 D Deprecated or discouraged = Do not use! HTML 4.01 tags http://www.w3.org/TR/1999/REC-html401-19991224/index/elements.html ? Will maybe be in (X)HTML 5, but not yet documented. XHTML 1.0 http://www.w3.org/TR/xhtml1/ s Sometimes available depending upon serialization or other factors. XHTML 1.1 http://www.w3.org/TR/xhtml11/ Block/Inline/Table refers to default CSS rendering and nesting rules. XHTML basic http://www.w3.org/TR/xhtml-basic/ Elements that have "display: inline" but may contain block elements have been marked "I*" XHTML Mobile http://www.openmobilealliance.org/ (dropped from table above) Normal/Invisible/Replaced also refers to CSS treatment of the element. XHMTL 2.0 tags http://www.w3.org/TR/xhtml2/elements.html Some elements might be more than one. The normal case is listed. (X)HTML 5.0 http://whatwg.org/specs/web-apps/current-work/ Server events http://dev.w3.org/html5/eventsource/ Useful links Web Forms 2.0 http://www.whatwg.org/specs/web-forms/current-work/ www.triin.net/temp/html-elements.html Ruby annotations http://www.w3.org/TR/ruby/ (not included in table above) meiert.com/en/indices/html-elements/ XHTML Print http://www.w3.org/TR/xhtml-print/ (not included in table above) simon.<a href="/tags/HTML5/" rel="tag">html5</a>.org/html5-elements Xframes http://www.w3.org/TR/xframes/ www.w3.org/2007/07/xhtml-basic-ref.html dev.w3.org/html5/html4-differences/Overview.html Background and intended use The recommendations in the table above represents the personal opinion of Lars Gunther, although valuable suggestions have been provided by April Siegfried, Christian Montoya, Alexey Feldgendler and Simon Pieters. This list is intended to be used as a reference while coding (or seeing other's code) and as notes for learning (X)HTML. Strict doctypes that are supported by the browsers of today is recommended for normal web pages. Knowledgeable authors may of course start experimenting with (X)HTML 5. Proprietary elements are included for reference if stumbled upon. A few XHTML 2.0 are included as examples of where (X)HTML might be heading in the future.</p><p>Book references Dynamic HTML: The definitive reference, Third Edition, by Danny Goodman. Sebastopol, CA, USA: O'Reilly Media, 2007. ISBN: 978-0-596-52740-2</p><p>Copyright: Lars Gunther. Creative Commons: Attribution-NonCommercial-ShareAlike 2.5 Page 11 Version: 1.09 http://creativecommons.org/licenses/by-nc-sa/2.5/ (X)HTML Best Practice Cheat Sheet All elements d e are sorted with- c la in their groups p l l e ty s in prioritized a a ] li e n t le R i e n t [ b u o e o e b / i s c order. Recom- i ti s l s s n t s i ]a a g i i e t e c n s a t s s i T i r r mended c c s [ m e i n m i n m / r n c e a r a a tr a a a a s e t r r r r e ]o c (X)HTML ver- s t f s t f B 0 n e A e w p . li N c p 1 1 1 0 0 0 1 1 0 [ m i o sions are mint- ...... 5 n / & t s r a 2 0 0 0 1 1 1 ] c c e b . . . . 1 1 2 L [I le i y t d 3 4 / t t a 4 4 L L L L L L b i r o le e colored. M k i n il n l L L L L T c s a p b y M M M M M M i b t t M M M M T T T T T T H o v O a ) ]l m a s t s T T T T H H H H H H n e s e E o n X ] H H H H X X X X X X ( [B [I S U B S N U Element Standards Information</p><p>HTML 3.0 elements not in table above XHTML 2.0 elements not in table above Structural module Xforms module http://friendlybit.com/html/forgotten-html-elements/ Blockcode Action http://www.w3.org/MarkUp/html3/ Separator Delete Accessibilty module Dispatch http://www.w3.org/MarkUp/html3/ Access Group <abbrev> Turned into abbr Text module Load <app> Synonym for applet L (line of text) Message <au> Synonym for <author> List module Model <author> ”Author” Di (defintion item) Output <banner> Special element for ads (+ some more uses)! ”Should not scroll”. Today: position: fixed; Events module Range <bg> Sort of like blockquote ev:listener Rebuild <credit> Who is quoted with <bg> or who has made an image shown with <fig> Handler module Recalculate <fig> Advanced alternative to img. Revived (in changed form) in (X)HTML 5 as <figure> Handler Refresh <fn> Footnote. Object Module Repeat <hp1><hp2>etc Highlight text in a browser-specified way. Sort of revived as <mark> in (X)HTML 5 Standby Reset <lang> Language Tables Revalidate <lh> List header Summary Secret <math> Equation or formula (had lots of sub-elements) Xframes Select1 <nextid> Deprecated already by RFC 1866 (5.2.6) but actually supported by MSIE 4+ (sic!) Frames Send <note> Explanatory note outside of text flow. May be revived in (X)HTML 5 Group Setfocus <overlay> Used with fig Setindex <person> Signifies that it is a name Setvalue <range> Defines a range within the document Submit <spot> The spot tag can be used to specify a location in the document where there is no tag. Switch <tab> Tabulator Trigger Upload Elements that have been part of the HTML 5 editors draft at one point, but dropped <datatemplate> The datatemplate element brings together the various rules that form a data template. The element doesn't itself do anything exciting. <rule> The rule element represents a template of content that is to be used for elements when updating an element's generated content. <nest> The nest element represents a point in a template where the user agent should recurse and start inserting the children of the data node that matches the rule in which the nest element finds itself. <eventsource> Server side events <datagrid> Interactive representation of tree, list, or tabular data <bb> Browser Button – an UA command that the user can invoke <dialog> Conversations, irc-logs and Shakespeare</p><p>Copyright: Lars Gunther. Creative Commons: Attribution-NonCommercial-ShareAlike 2.5 Page 12 Version: 1.09 http://creativecommons.org/licenses/by-nc-sa/2.5/ (X)HTML Best Practice Cheat Sheet All elements d e are sorted with- c la in their groups p l l e ty s in prioritized a a ] li e n t le R i e n t [ b u o e o e b / i s c order. Recom- i ti s l s s n t s i ]a a g i i e t e c n s a t s s i T i r r mended c c s [ m e i n m i n m / r n c e a r a a tr a a a a s e t r r r r e ]o c (X)HTML ver- s t f s t f B 0 n e A e w p . li N c p 1 1 1 0 0 0 1 1 0 [ m i o sions are mint- ...... 5 n / & t s r a 2 0 0 0 1 1 1 ] c c e b . . . . 1 1 2 L [I le i y t d 3 4 / t t a 4 4 L L L L L L b i r o le e colored. M k i n il n l L L L L T c s a p b y M M M M M M i b t t M M M M T T T T T T H o v O a ) ]l m a s t s T T T T H H H H H H n e s e E o n X ] H H H H X X X X X X ( [B [I S U B S N U Element Standards Information Updates 2008-02-20 Changed <m> to <mark> 2008-08-04 Added seamless option to iframes, <command>,<bb>; datatemplates. Changed <event-source> to <eventsource>. Added elements to XHTML 1.1. basic. XHTML 1.1 Mobile dropped! 2009-04-23 <keygen> is HTML 5 approved. 2009-06-22 Added hgroup (HTML 5). Redefined header (HTML 5). Made clear that frames and font are not part of HTML 5. Note that underlining should always be avoided. rel="canonical" added to <a>. Added info about eventsource (Including Comet). Notes and commentary updated throughout. Dropped datatemplates 2009-06-30 More detailed explanations. Print stylesheet, version is shown. <base> allowed in XHTML 5 (spec change) <basefont> is deprecated in HTML 4.01 (fix) Eventsource has been dropped as an element (spec change) <html>, <listing>, <xmp> are B (block elements) (fix) <a> Added "May contain block elements in (X)HTML 5." <noscript>, <ins>, <del> <object>, <noembed> and <canvas> are now marked I* (display: inline, but may contain block elements) (pedagogic change) <embed>, <applet>, <meter>, <progress> and <keygen> are now marked I (inline) (fix) <keygen> is now marked R (replaced) (fix) Ruby elements are not marked inline anymore (blank) (pedagogic change) Ruby elements <rbc>, <rtc> and <rb> marked as ? for HTML 5 (Not in spec, maybe never will be?) <isindex> Is more described as they are treated by an HTML 5 parser. (pedagogic change) <layer>, <nolayer>, <ilayer>, <xml>, <multicol>, <spacer> have no information any longer about inline/block or normal/invisible/replaced, since current behavior differs from the original intention (pedagogic change) Expanded info about <isindex> (Block, text appears) (pedagogic change) <details> is N (normal), not I/N/R (pedagogic change) <thead> repeats on each page when printing (fix) Table is now T (not B) (pedagogic change) 2009-08-15 Datagrid has been removed from HTML 5 Viewport has been redefined in both HTML and XHTML (dropped from this table) Some housekeeping More detail on nav 2009-09-21 bb has been removed from HTML 5 dialog has been removed from HTML 5</p><p>Copyright: Lars Gunther. Creative Commons: Attribution-NonCommercial-ShareAlike 2.5 Page 13 Version: 1.09 http://creativecommons.org/licenses/by-nc-sa/2.5/</p> </div> </article> </div> </div> </div> <script type="text/javascript" async crossorigin="anonymous" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8519364510543070"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script> var docId = '5869388acdaab71fc53a364918db0d2d'; var endPage = 1; var totalPage = 13; 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/5869388acdaab71fc53a364918db0d2d-" + 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 < 7) { adcall('pf' + endPage); } } }, { passive: true }); </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>