How to Start Making Websites the Modern Way (Part Two)
Last time we took the first few steps in turning a page of text into a web page, simply by wrapping what you’ve already written in various tags. As a good little student, I will reference my sources: much of this article was both inspired by and information learnt from Andy Clarke’s (my Dad’s) Hardboiled Web Design.
Before we get going, I have a present for you. Download this collection of files and we’ll get going. Today we’ll deal with index.html and everything else I’ll introduce when we need it; for the purposes of making a basic web page, you don’t need to understand what is between the <head> tags (not to be confused with <header> that we will cover later) but I’ll talk about them in a future article. Anything between the <body> tags will be visible on the site—copy your marked-up content from last week into there.
Structure
The web isn’t just a collection of plain, one-column pages like we built last time; it has layout and structure. To do this, we need to start dividing your content.
We do this by putting some of your existing content into containers; you write an opening tag before the first bit of content in the group and a closing tag after the last bit. There a several of these containers and all have a slightly different part to play:
<div>(division) a generic container for any content.<section>a generic container for related content.<nav>(navigation) a list of some of links to other pages on the site—you know what navigation is.<article>a specialised container for a news article, story or other self-contained piece of work.<header>a specialised container for the kind of information that goes in a header area—be that of the whole page or a single article.<footer>just like a header, it is a specialised container for the kind of content you need, but want to put out of the way in a footer. This can be for the whole page or a single article.<aside>this is a specialised container for information that is related to that of the main article but isn't crucial to understanding it.
Picture this…
You have the page title, below it a tagline and below that a list of other pages on the site. Then you have two articles, each with a title, the article itself, a few sentences about the author (you!) and some other information such as the date it was published, any references and copyright.
Here it is:
Around the page title and the tagline we’ll put a <header> because this is the main heading of the page and around the list of other pages (the navigation), we'll put a <nav>.
Then you open a <section> and then an <article>, don’t close either of them just yet. Then put a <header> around the article’s title and a <footer> around the author information, copyright and publishing date.
Now close the <article> and open another one; repeat what you just did for the <header> and <footer> of the last article. Now close the <section>.
This is what your site should look like now; the boxes are just to illustrate, you wont see them
ARIA roles
Now that you have broken down your content into blocks, you might want to tell the computer what each of these blocks is for. These roles are important for two reasons: one, because not everybody views the Internet like we do—if someone is having the page read out for them by a screen-reader they probably don't want to hear the name of the site and tagline on every page—they want to get straight to the actual content. And two, because we can use these roles to specify which object we want to style—we’ll get onto that next time.
Just like we used alt="" to describe an image for those who can’t see it we use role="" to describe what each part of your page does. Put this in a structural tag like those we just used. For example <header role="banner">.
bannerThe primary branding area or masthead of the page—this can go on a<header>that is the heading of the page, but not the heading of an article.mainThe main content on the site, in our example above it would go on the<section>because all of the content is inside it.- If you use an
<aside>then you should probably give it arole="complementary"and if use a<footer>then you should give it arole="contentinfo". Likewise, the same applies for<nav>androle="navigation".
This may feel like doing things twice but you’ll thank me for it next time.
Okay… so I lied to you. That wasn't nearly as fun as I made it out to be last week—but you wouldn’t have read it if I said it was boring. If you compare your page before and after this lesson in a browser then it shouldn't have made any difference; what you can't see is we are now ready to start adding some style to your web page—but that is for next week! =P
