HTML Body

The body section of your HTML contains the visible part of your webpage. Let's start building out some content!

This section will help guide you through the following steps:

Add headers to your web page
Create "About" and "Contact" sections
Add a list of sections for navigation
Add a footer
Inspect HTML in Chrome

Add headers

Let's start adding some visual elements to our web page by adding headers.

In VS Code, place your cursor on the blank line between <body> and </body>.
Most HTML elements have an opening and closing tag. The <body> tag is the opening tag. The </body> tag closes that element.

The worksheet will specify adding new HTML elements between the opening and closing tags of existing tags. Sometimes it's easier to match up the tags before adding a new element. You got this!
Add a header by typing <h1></h1>. Write the name of your cocktail lounge between the opening and closing tags.
Save your file. The file should reload automatically in Chrome when you have Live Server running. Take a look at your webpage. We have content!
In VS Code, after the closing </h1> tag, press Enter to start a new line and add an <h2> tag for a subtitle.
Add the text "Cocktails with a side of Code". The body section should look something like this
index.html
```
 <body>
     <h1>Coding's Cocktail Lounge</h1>
     <h2>Cocktails with a side of Code</h2>
 </body>
```
There are 6 levels of section headings, h1 - h6.

If you imagine your HTML as an outline, the highest section level is h1 and h6 is the lowest section level. As we move into more details within the webpage, we decrease the header section level. Use the different header levels to categorize content in your web page, not because you want different size text.
Exciting! You're rocking now! Show off your webpage to your neighbors. Take a screenshot and upload a picture of your webpage to the #codingandcocktails channel in Slack!

Create "About" and "Contact" sections

Next, we'll want an "About" section and a "Contact" sections and add text. We'll explore using section and p elements.

After the <h2></h2> subtitle, press Enter to start a new line. Add a "About" section by typing <section></section>.
There's a lot of different HTML elements. When writing HTML, focus on the content and the meaning of what you are trying to communicate, not the website presentation. Good web development practice recommends doing so and calls this style of coding Semantic HTML.

section groups standalone content, typically include a header, and helps organize the HTML into logical pieces. Use the element that best describes your content to align with Semantic HTML practices.

You may have seen or heard of <div> as a means to group content. Following best practices, use <div> to group elements only for styling purposes, not for content organization. Read more about <section> and <div> in the references.
Between the opening and closing tags for <section>, let's add the "About" header. Since this is the third most important heading on the page, we'll use an <h3> tag.
Need a little help? Expand this section for guidance.
Place your cursor between the opening and closing tags for <section>, press Enter, and type <h3>About</h3>. Your code should look like this
```
<section>
   <h3>About</h3>
</section>
```
After the "About" header, but still inside the <section> element, we should add a description about this fine establishment. Add a paragraph element and type in a description of your choosing. The paragraph element is <p>.
Don't forget to close the <p> tag.
Save your file and preview your page in Chrome.
Feel free to save your work and preview your page as you code tonight. It's fun to see how each element progresses the creation of the webpage.
Now we want to add a new section to the page for "Contact". After the closing tag for <section>, add a new section element.
Need a little help? Expand this section for guidance.
Place your cursor after </section>, press Enter, and type <section></section>. Your code should look like this
```
<section>
   <h3>About</h3>
   <p>A fun place to drink trendy cocktails while learning web development.</p>
</section>
<section>
</section>
```
The "Contact" section needs a header and a description, just like the "About" section. Let's start with the header. Add the header and use the text "Contact".
Then add a description for the "Contact" section using the text "Stay in contact with us by adding your email address to our mailing list."
Need a little help? Expand this section for guidance.
Place your cursor between the opening and closing tags for <section>, press Enter, and type <h3>Contact</h3>. Then add <p></p> tag with the text. Your code should look like this
```
<section>
   <h3>Contact</h3>
   <p>Stay in contact with us by adding your email address to our mailing list.</p>
</section>
```
Save your file and view it in Google Chrome. Your page should look similar to this:

Navigation list of sections

Most websites have a navigation element with a list of links also called a "navbar". We'll add the links later, but for now, we can create the navbar structure. We have two page sections - About and Contact - so we'll need two navigation list items.

Using list elements is also helpful for accessibility since screenreaders utilize the metadata it provides.

We want to add the navigation bar at the very top of the web page. Place your cursor after the opening tag for <body> and press Enter. You are now adding HTML before the <h1> tag.
Navigation sections have their own HTML element called nav. Add a nav element (don't forget the closing tag). Your code will look something like this.
index.html
```
 <body>
     <nav>
     </nav>
     <h1>Coding's Cocktail Lounge</h1>
     Remaining code for subtitle and sections...
 </body>
```
Inside the nav element, we want to add a list of sections we created, "About" and "Contact". To create an unordered list, add a ul element.

There are 2 types of lists-- unordered (bulleted) lists and ordered (numbered) lists. Website navigation is often an unordered list.
Each item in the unordered list has its own tag, li. Inside the ul element, add two li elements with the text "About" and "Contact".
Need a little help? Expand this section for guidance.
Place your cursor after <ul>, press Enter, and type <li>About</li>. Add a new <li> for "Contact". Your code should look like this
```
<body>
   <nav>
      <ul>
         <li>About</li>
         <li>Contact</li>
      </ul>
   </nav>
   <h1>Coding's Cocktail Lounge</h1>
   Remaining code for subtitle and sections...
</body>
```

We want recognize our work and add a footer with copyright information.

After the "Contact" section, at the very end of the page but still in the body, we want to add a footer. The HTML element for footer is footer. Place your cursor after the closing section tag for "Contact", press Enter, and add the footer element.
Footers often contain copyright information so try using an HTML entity to add a copyright symbol. Between the opening and closing <footer></footer> tags add the text

© Copyright Your Name 2020.

Inspect HTML in Chrome

You'll often find yourself needing to look at how your page renders in the browser to troubleshoot issues so let's give that a try.

In Chrome, right-click on your <h2> element and select Inspect. This will open up your Chrome Developer Tools (DevTools) to the Elements tab and highlight the element in the HTML.
Chrome DevTools has a lot of features. We used it earlier tonight to look for console logs and now to inspect elements. We'll continue to use DevTools in upcoming sessions to help us dig deeper into our code.
Notice you can see all your tags that you've added to the page and how they nest inside each other. It should look something like this:
Notice as you mouse over elements in the DevTools that they highlight in the rendered view above.
You can also click the arrows to the left of your <section> elements to expand them and see the elements inside them.

In addition to viewing elements, you can make and preview changes here before making them in your code.

In the Elements section of the DevTools, double click on the text inside your <h2> tag. This should make it editable. Change it to "Hello World" and then press Enter
Your <h2> text should now display "Hello World" on your rendered page.

This only lasts until you refresh the page! If you want to make a lasting change you need to make the change to the code in your IDE.
Refresh your page to see your text return to what you have in your code. You can either keep your DevTools open or close them with the small x in the upper right corner of the DevTools.

Element inspection comes in handy when you're trying to style your page too so we'll use this a lot next month when we learn about CSS!