Setting Up the Document- Chapter 2
➜ Chapter Booklet HERE
Setting Up the Document
We learned how to add elements to our HTML file in our last course, but in reality there are going to be a few more things we will need to add in order to style and more easily layout our website.
This will introduce us to a few more elements.
First of all, we have an <h1> heading near the top of our file, just under the opening <body>. This is where the header of a website typically goes, so we will add a <header> element to set up this area.
<header>
<h1> This is My First Website </h1>
</header>
This addition will allow us to be very descriptive about this content.
There are a few of other elements that can be useful when sectioning out your HTML content.
The <main>, <section>, <article>, <header> and <footer> elements are all a part of the HTML5 update, which established new elements in support of developers and technologies.
These elements don’t have to be used in order for content to render (you can use other elements), but these add descriptive context to your code and they should be used with their closing tags (e.g., </main>). Just like most HTML elements, they can also be nested inside of other elements.
Their names are very intuitive when it comes to how they should be used.
<main> can be used to designate the main content of a webpage.
<section> can be used to designate a specific section within a webpage.
<article> can be used to designate stand alone content such as an article or blog in an online newspaper.
<header> can be used to designate the beginning of a webpage or even a header within a <section>.
<footer> can be used to display content at the end of a website or at the end of a <section> or <article>.
When all else fails, there are two other elements that can be used to help you section off content.
The <div> element is a way to divide your content (to create a division) in order to help you manage the flow and layout of your website. It is a block element, so when you put content within a <div> that content will take up the entire block (or whatever space is allotted to it).
The <span> element can be used to section off content within a line. In other words, it is an inline element and it will not cause subsequent content to start over on a new line.
Be sure to complete the exercise for this chapter before moving on to chapter 3.