(X)HTML Best Practice Cheat Sheet.Pdf 2007-08-13 17:49 236 KB
Total Page:16
File Type:pdf, Size:1020Kb
(X)HTML Best Practice Cheat Sheet All elements are sorted ]able ed T within their /[ lac l y ]ep t groups in ish) [R ues prioritized tional sibili eset eset al/ ance t t s r order. ic nline(- m e er iss r ansitiona am asic ] am r r I or s r ] eaning Recommended transi t Mobile Acc 0 st 0 f 1 B 0 N ice 1 stric 1 f 5.0 h)/[ /[ m appea (X)HTML 2 01 & 1. 1.0 1. 1.1 1. 1.1 2. -is ic 4.0 4.0 act versions are L L L L ML k( ible led pr notes ble brow M ML M ML M ML M T is ty mint-colored. ML 3. ML ML 4. ML T T T O ]loc mant s T T T T HT HT HT HT nv sability est n X)H ] H H H H X XH X XH X XH X ( [B [I Se U B SE Nota U Element Standards Information Document structure <html> N Viewport in XHTML <head> I The main Viewport in HTML. <body> B N content of the Margin: 8px; document The Highly ranked and Make unique for <title> I documents will be the link- Text on the title-bar every page title or name text Only ”name = <meta> I 'description'” is useful Indicates explicit relationship between this <link> I document and other resources. As such there are many good uses! External style <style> I sheets are usually best Unobtrusive Test for Keep scripts Script may have <script> I DOM-scripts, capabilities, not external output please! browsers! Unnecassary with unobtrusive Not ignored by true <noscript> BI I scripting techniques! Forbidden in s XML parsers! XHTML 5. Ignored by MSIE <base> I s for scripts <basefont> I Use CSS Non element markup constructs Better skip. It will put MSIE <= 6 in quirks mode and is NOT obligatory. In XML <?xml ?> s I theory best place to specify encoding for offline usage of an XHTML declaration document. Will control What flavour Required in every standards <!DOCTYPE> I of (X)HTML is version since compliance or used? HTML 2.0! quirks mode Use richly while MSIE has Code <!-- --> I learning and conditional comment developing comments 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 Copyright: Lars Gunther. Creative Commons: Attribution-NonCommercial-ShareAlike 2.5 Page 1 Version: 1.06 http://creativecommons.org/licenses/by-nc-sa/2.5/ (X)HTML Best Practice Cheat Sheet All elements are sorted ]able ed T within their /[ lac l y ]ep t groups in ish) [R ues prioritized tional sibili eset eset al/ ance t t s r order. ic nline(- m e er iss r ansitiona am asic ] am r r I or s r ] eaning Recommended transi t Mobile Acc 0 st 0 f 1 B 0 N ice 1 stric 1 f 5.0 h)/[ /[ m appea (X)HTML 2 01 & 1. 1.0 1. 1.1 1. 1.1 2. -is ic 4.0 4.0 act versions are L L L L ML k( ible led pr notes ble brow M ML M ML M ML M T is ty mint-colored. ML 3. ML ML 4. ML T T T O ]loc mant s T T T T HT HT HT HT nv sability est n X)H ] H H H H X XH X XH X XH X ( [B [I Se U B SE Nota U Basic semantics Large bold text, Use in correct <h1> to <h6> B N Heading Highly ranked gradually smaller. order Margin-top/bottom <p> B N Paragraph Margin-top: 1em; Emphasized Usually spoken Do not equate <em> I N Italics text louder with ”italics” Emphasised Strongly words may get Usually spoken Do not equate <strong> I N emphasised higher ranking. Bolder really loud! with ”bold” text <abbr> I N Abbreviation ”All acronyms are abbreviations”. Not in MSIE abbr[title], Make sure they are not confused with acronym[title] links. CSS-speech: Spell out { border-bottom: <acronym> I N Acronym initialisms. dotted 1px; ] Do not equate Indented right and <blockquote> B N Longer quote with ”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 <ins> BI N Inserted text Underlined underlining off <del> BI N Deleted text Strike through <dfn> I N Defined word Italics Probably like h1, <h> B N Heading Use with ”section” h2, etc. Conversation Proposed <dialog> B N (use with dt replacement for Probably like <dl> and dd) <dl> for dialogues Marked or In future, use to highlight matches to <m> I N highlighted search string text Hypertext Link text should rel=”nofollow” Any element with Blue underlined be means it will not <a> I N Link an id can replace text. Images get a understandable increase targets its use as ”anchor” blue border. out of context page rank Copyright: Lars Gunther. Creative Commons: Attribution-NonCommercial-ShareAlike 2.5 Page 2 Version: 1.06 http://creativecommons.org/licenses/by-nc-sa/2.5/ (X)HTML Best Practice Cheat Sheet All elements are sorted ]able ed T within their /[ lac l y ]ep t groups in ish) [R ues prioritized tional sibili eset eset al/ ance t t s r order. ic nline(- m e er iss r ansitiona am asic ] am r r I or s r ] eaning Recommended transi t Mobile Acc 0 st 0 f 1 B 0 N ice 1 stric 1 f 5.0 h)/[ /[ m appea (X)HTML 2 01 & 1. 1.0 1. 1.1 1. 1.1 2. -is ic 4.0 4.0 act versions are L L L L ML k( ible led pr notes ble brow M ML M ML M ML M T is ty mint-colored. ML 3. ML ML 4. ML T T T O ]loc mant s T T T T HT HT HT HT nv sability est n X)H ] H H H H X XH X XH X XH X ( [B [I Se U B SE Nota U Page structure <div> B N Part of page Avoid ”divitis” Is a semantic Avoid <span> I N element ”spanmania” available? If so, May override <pre> B N use that instead. 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 <address> B N in combination with <address> for Italics information contact info. Document or Section takes Does not equal <section> B R application priority over h1-h6 <div> section Stand alone <article> B N capable section ”tangentially <aside> B N related to the Today: Good content” values for id or class attributes! Heading for a <header> B N section Footer for a <footer> B N section Caption will probably be Proposed Paragraph <figure> B R mandated. replacement for with a caption Content may be a misuse of fieldset' image. <headings> Set a heading <listing> D (Parsed as CDATA, preserved <xmp> D whitespace) Copyright: Lars Gunther. Creative Commons: Attribution-NonCommercial-ShareAlike 2.5 Page 3 Version: 1.06 http://creativecommons.org/licenses/by-nc-sa/2.5/ (X)HTML Best Practice Cheat Sheet All elements are sorted ]able ed T within their /[ lac l y ]ep t groups in ish) [R ues prioritized tional sibili eset eset al/ ance t t s r order. ic nline(- m e er iss r ansitiona am asic ] am r r I or s r ] eaning Recommended transi t Mobile Acc 0 st 0 f 1 B 0 N ice 1 stric 1 f 5.0 h)/[ /[ m appea (X)HTML 2 01 & 1. 1.0 1. 1.1 1. 1.1 2. -is ic 4.0 4.0 act versions are L L L L ML k( ible led pr notes ble brow M ML M ML M ML M T is ty mint-colored. ML 3. ML ML 4. ML T T T O ]loc mant s T T T T HT HT HT HT nv sability est n X)H ] H H H H X XH X XH X XH X ( [B [I Se U B SE Nota U Visual formatting <br> I N (Line break) Line break May be only <b> I N option for a May get a sligthly Bolder WYSIWYG editor <i> I N elevated rank Italics <sub> I N Subscript E.g. Use with simple math, footnotes, and when part of language idiom. <sup> I N Superscript (X)HTML 5 may get a special format for footnotes <big> I N Bigger (”Smallprint” <small> I N in (X)HTML Smaller 5) Use CSS <tt> I N Fixed width font Centers <center> D D D D B N everything! Use CSS. Only allowed for Changes font <font> D D D D s I N WYSIWYG tools settings in (X)HTML 5. <u> D D D D I N Use CSS Underlined <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. Copyright: Lars Gunther. Creative Commons: Attribution-NonCommercial-ShareAlike 2.5 Page 4 Version: 1.06 http://creativecommons.org/licenses/by-nc-sa/2.5/ (X)HTML Best Practice Cheat Sheet All elements are sorted ]able ed T within their /[ lac l y ]ep t groups in ish) [R ues prioritized tional sibili eset eset al/ ance t t s r order.