semantic markup

semantic markup refers to the structual naming of HTML tags.

the pageview is created with HTML tags. The markup is a notation of the content consisting of elements denoted by tags, which are interpreted by the browser to make the view.

ID naming conventions is at the foundation of standards based design; structural naming identifies the semantic role of that bit of the document. Focus on the functional naming rather than the colorful naming. If we use #branding instead of something silly like #top_left_flower_header then when the design requirement changes to the right we'll be ok.

better SEO

semantic markup makes your site's content attractive to search engines like Google. Findability is the term for the benefit of search engine optimization.

one h1

• only one <h1> on the page
• open and close every tag, e.g. <p></p>
• special syntax for 3 exceptions: <img />, <br /> and <hr /> with a space before the slash
• <a href="/design/">Learn more</a>
• <img src="/img/thing.png" alt="thing" title="thing" />
• for CSS selector use semicolon on property/value pair:   .selector_bam { color:#ccc; margin:7px 0; }
• use <strong> and <em> rather than bold and italic