Now that we’ve covered the basics of HTML it’s time to start getting to some real implementation.
Note that this is an updated version of the 2011 post: http://www.blog.baweaver.com/post/8769994134/practical-html-page-structure
So What is HTML for? Really?
HTML is meant to be a skeleton on which CSS is laid, marking up areas of text and content so that it can be cleanly divided into sections. This makes HTML an extremely modular language in conjunction with CSS.
I will warn you, always start with your content first. Never start coding CSS until your HTML skeleton is finished and ready. If your site cannot stand on its own in a logical order as just HTML then you have not done a proper job in arranging the elements.
What do I use to achieve this?
There are four main tags that are used to section off content in HTML, the div tag and the span tag for content, and the ol and ul tags for lists.
With HTML5 we introduced many more tags that are more correct for content, and should be preferred. section, aside, header, footer, nav and article are far more semantically sound than using multiple div tags as was the way with older HTML versions
So what’s the difference?
A div tag is what is referred to as a block element. A block element is rendered to line-break after a tag is closed. This means elements in div tags will logically stack on top of eachother as if they were blocks.
A span tag is an element who displays inline. This means that it will render elements one after another until it reaches the end of a page, hence being in line.
The Header of your site, for things such as your banner, and your navigation
The Navigation of your site, typically a list will be the contents, and we will cover those in a few seconds.
The Footer of your site, best for lonks, contact information, and copywrites.
Literally a section of text, such as your articles section of your site.
Used for content that is partially related to the matter at hand, such as a side quote for an article.
A syndicated section of text such as a Blog Post.
Elements that are naturally ordered belong in an ordered list element, with each list item being denoted by an li tag as such:
1 2 3 4 5
Elements not naturally ordered would go into an Unordered List:
1 2 3 4 5
Lists are extremely helpful for things such as menus, especially when you use an a tag inside them. With some styling you can get them to display inline, remove the bullet points, and move them all about.
A Basic Layout
A basic layout using these involves two more attribute that is directly tied to CSS: id and class. An id is a unique marker whereas a class can be used multiple times. These are later used as hooks for CSS styling.
An id is used to define areas that only occur once, such as a main menu, a header, a column, or otherwise. A class is used to define an item that occurs multiple times, like an image you want on a certain side of your text.
Here’s a basic example of a layout using these tags:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
What to do from here
We have ourselves a basic skeleton made in HTML using what we know so far, the next step along the road is to start learning css to make this into a basic site.