Lesson 4: HTML5 Structure

Click for closed captioning

Next Step

Step 2: HTML Structure in Action

Click for closed captioning

When you add structural tags to your page, you're grouping related content together.

As you learn CSS, it will start to make more sense why it's so important to structure your code in logical way.

For now, you can use the metaphor of moving to a new apartment. You divide your things into boxes because it makes moving easier. The silverware would have its own box, and so would the books. You would also write what's in the box on the top flap. In our metaphor, the id and class attributes are like marking what's inside the box.

You can read more about all HTML5 tags in detail if you'd like, or view the class Google Doc of common tags.


Click for closed captioning

What ultimately matters is that the page displays the way you want.

Many designers exclusively use the <div> tag to separate their content. Others use the HTML5 layout tags. Still others ponder the proper semantic time to use <section> or <article> based on the W3 guidelines.

But there's no Platonic ideal of how to build a page. If it's organized the way you want and looks the way you hope, then you've done a good job.

For reference, here are lists of block and inline elements.

Next Step

Step 3: Meet a Creative Developer

Click for closed captioning

Sam Saccone is a creative developer and programmer working in Providence, Rhode Island.

He graduated from Ohio University's visual journalism program in 2011, and now works at the design and development firm MojoTech.

After getting peppered with help requests from his photographer friends, Sam created Samexhibit, a template site for photojournalists that lets the user customize the HTML, CSS and even JavaScript. Almost 1,000 people have built their site using his platform.

"Simple, clean and focused on content– that's really a push I see on the web," says Sam.

He often uses the HTML5 canvas tag and writes the JavaScript that powers it as he develops sites. Those are both beyond the scope of our class, but for more advanced students looking to experiment on their own, Sam recommends three.js, as well as the Mozilla Canvas Tutorial and JavaScript Tutorial.

And don't forget that Code Academy is a great resource to practice HTML, CSS and more advanced programming. Right now JavaScript is the most common programming language used to add interactivity to a page. Stack Overflow is a good forum to ask advanced questions.

Media Storm MojoTech
The Image, Deconstructed Infographics.com
Virginian Pilot Story Soul of Athens

Next Step

Log in to Moodle to complete Assignment 4.