After
the PSD:
Thinking Through
Your Code
Rye Mason
@ryenotbread
Think through your code
(and your PSD, too)
Why?
Because it doesn't
make sense to
write code you
don't actually need.
How?
Question the designs you make and the markup you write.
Ask:
How?
What?
Where?
Why?
How is content related?
Where would the element go in the document flow?
Determine the
appropriate markup
<header>
<footer>
<nav>
<section>
<article>
<aside>
<div>
<figure>
<header>
-
Used for header content
- Should contain more than just a heading
- Can have more than one instance (e.g. nested in
a section, article, etc.)
<footer>
- Contains footer content like nav & copyright info
- Like header, can have multiple instances on a page
<nav>
- Used to mark up navigation
- Headings can be included inside this element
<section>
- Used to group distinct sections of content
- Don't use solely as a styling hook
- If the content can stand alone, use <article> instead
<article>
- Used to contain individual pieces of content,
like a blog post - If something could stand alone, use an article
<aside>
- Used to contain secondary content related
to the main content - Is not necessarily a sidebar
- When used inside <article>, <aside>'s
information should be directly related
to that article (as a glossary, etc.)
<div>
- Yes, it's still usable.
- Use a div when there's no better element
for grouping content - usually for styling
<figure>
- Meant to be paired with <figcaption>
to mark up images, diagrams, code, etc.
with an accompanying caption -
Don't use it as license to throw <figure>
around all your <img>s, though
Make it Code
- Slice the graphics you need (use CSS
where you can) - Mark up your HTML
- Style using CSS
Take it Further
How would you turn an apartment building into code?
How would you code a mailbox?
Keep Going
html5doctor.com
w3.org
after the psd
By ryenotbread