StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I have a fairly natural way of coding. The key is to treat the page like a document or an article. If you think of it like this the following becomes logically clear:</p> <ol> <li><p>The page title is a top level heading </p> <ul> <li>Whether you make the site title or actual page title the h1 is up to you - personally I'd make About Us the h1 rather than Stack Overflow.</li> </ul></li> <li><p>The navigation is a table of contents, and thus an <strong>ordered list</strong> - you may as well use an ol over a ul.</p></li> <li><p>Section headers are h2, sections within those sections are h3s etc. Stack them up.</p></li> <li><p>Use blockquotes and quotes where possible. Don't just surround it with ".</p></li> <li><p>Don't use b and i. Use strong and em. This is because HTML is structural rather than presentational markup. <strong>Strong</strong> and <strong>em</strong>phasis tags should be used where you'd put emphasis on the word.</p></li> <li><p><code><label></code> your form elements.</p></li> <li><p>Use <code><acronym></code>s and <code><abbr></code>s where possible, but only in the first instance.</p></li> <li><p>The easiest: always, <em>always</em> give your images some alternate text.</p></li> <li><p>There's lots of HTML tags you could use that you probably haven't - address for postal addresses, screen code output. Have a look at <a href="http://www.htmldog.com/" rel="noreferrer">HTML Dog</a> for some, it's my favourite reference.</p></li> </ol> <p>That's just a few pointers, I'm sure I could think of more.</p> <p>Oh, and if you want a challenge write your XHTML first, then write the CSS. When CSS-ing you aren't allowed to touch the HTML. It's actually harder than you think (but I've found it's made me quicker).</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload