Html article tag

While the contents of the <header> and <nav> elements tend to vary little from page to page the <article> element contains content unique to each page. It's where the action is. What you are reading now is in the <article> element ...perhaps in this case there's not a lot of action, but you get my meaning.

I have spent some time looking into what the experts say the <article> element is and there is not a lot of clarity on the subject. The only relatively consistent thread I can glean out of all of the esoteric talk is that it should contain content that stands on its own the way an article in a magazine would.

Open CoffeeCup (or whatever html editor you use) and open the new template you saved in the previous lesson. If needed open my copy of the new template, copy the source code, paste it into a blank page in CoffeeCup and save it as index.htm somewhere you will find it later.

Now copy the following:

article { width: 950px; display: table; }

and paste it above the </style> tag.

Next copy:

<article>
  <h1>The article title</h1>
  <p>This is the contents of the article element.</p>
</article>

and paste it under </nav>.

I have a copy of what the new template should look like now with the addition of some back ground colors so you can see what's what. Of course you may have made additional changes than just what I suggested. If so, great – at this point in the tutorial you know enough to do so – in fact play with it to your heart's content. If anything you do doesn't work you can always get back to my copy.

In web design the first thing you want to do is get people on your site. Then once there you want them to stay there, in other words you want your site to be "sticky". Doing so almost always has to do with having pertinent and interesting content. Good content is what visitors want. Give it to them.

Writing content for the web is tough because, unlike a book or a Kindle, reading on a monitor is difficult. It's hard to keep track of where you are when scrolling up and down the page. You will notice that on this site I often break up pages with:

• lists

bold or

italic fonts and

examples of