The user's who will be visiting your page will play an important roll in your web design structure. You want to think about why they would be coming to your site, consider thier motivations and goals.
Coming up with a few fictional users is important in the early stages of building your website. By putting yourself in the shoes of the user it will allow you to think more critially about your design choices.
Joe hates hates using computers and isn't use to web browsing.
How will Joe find the information he's looking for?
Sally is super busy and wants quick information.
How can I provide that?
Go deeper and considering the user's age, background, and other demographics.
A sitemap is a quick way to get down the basic sections of your website.
Wireframes are used to get the basic visual layout of your website, excluding any colors, graphics or other styling design choices.
<!DOCTYPE html> - tell a browser which version of HTML is being used
<html> - declares written code as html
<!__ comment __> - creates a comment unseen by the user, replace the word 'comment' with your message
<div> - divs are sectioning elements, creates boxes/container for a chosen group of elements
div id - name of a group such as page, content, sidebar
div class - type of box such as article * unused in html5
<nav> - used to contain major navigation blocks
<article> - act as a container for any section of a page that could stand alone and potentially be syndicated
<aside> - defines some content aside from the content it is placed in
<section> groups related content together
<hgroup> - heading group, groups h1-h6 elements
<figure> specifies self-contained content, such as images, diagrams, code-listings ect.
<a> using around a block turns entire block into a link