search

article & header

In this module we will do the following:

  1. Discuss headers.

  2. Create a basic header with minimal styling.

  3. Discuss articles.

  4. Discuss how headers can be used and more easily recognized and manipulated in these articles and sections.

hashtag
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-assets

hashtag
Article

"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." Attributionarrow-up-right for the above statement.

hashtag
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.

hashtag
Sample Code

Add the following sample code to your file:

hashtag
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.

hashtag
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.

PrevioussectionNextfooter

Last updated