article & header
In this module we will do the following:
Discuss headers.
Create a basic header with minimal styling.
Discuss articles.
Discuss how headers can be used and more easily recognized and manipulated in these articles and sections.
File Location
For this module, you should be working in the following location:
javascript-library
└── 0-PreWork
└── 1-HTML-Basics
11-articles-headers.html <---You should be here.
└── 2-CSS-Basics
└── 3-JavaScript-Basics
└── 4-assetsArticle
"The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content." Attribution for the above statement.
Headers
Headers are containers for other informational elements and act as a title for the element that they are contained within. Headers are not the same as headings.
Sample Code
Add the following sample code to your file:
Discussion
So, in the description we quoted it was stated that <article> is used for any "independent item of content". What does that mean? Basically, if you're able to strip away all of the content from around the <article>Content</article> and it still makes sense, then it might belong in an <article>!
We're introducing <header> in this same lesson because these two elements are frequently seen together. You'll see this pattern because stand-alone content (like an article, right?) tends to need ways to identify the content for the user. Briefly, it's worth remarking that the <header> element is not the same as a heading tag like an <h2></h2>. Much like the title to a book, <header> acts as a container for introductory content like a heading or a logo.
Challenge
Check out the attributes on the two bottom-most articles. There's some inline-styling present. Try changing the float and width parameters and observe how it changes what's rendered to the browser. Experiment fearlessly and add new articles with elements of your choosing.
Last updated