Adding New Elements to Homepage

To start using HTML and CSS to make a nav bar, we need to implement some new fundamental elements into our existing code.

DOCTYPE

Web browsers require certain code in our HTML pages to identify what type the file is. While most browsers are able to understand what we want without much issue, it is still a good idea to specify exactly what we're coding. This is where the <!DOCTYPE html> comes in. For our purposes, just think of this as telling the browser that we're coding a webpage

<html> Element

The <!DOCTYPE html> declaration gives two pieces of information: the type of document (webpage) and the HTML version to expect. It doesn't actually add much structure to the the document.

To add more structure, we need to add an <html> element to our code. The opening tag (<html) will go right after the <!DOCTYPE html> declaration, while the ending tag (</html>) will go all the way at the end of our code (past the ending </body> tag).

You may be wondering why all these elements are required. Essentially, they are just good coding style. They help later when using CSS, but their uses aren't super apparent right now. Bear with the sushi card and keep doing the tasks.

<head> Element

The head element adds metadata to our webpage. Unlike the <body> element, it gives information about the webpage itself, not actual media to be rendered.

We will use the head element to inject CSS code into our website, and use it to format text and background colors.

<head>
  <title>NAME THIS THE TITLE OF YOUR WEBSITE</title>
  <link type="text/css" rel="stylesheet" href="style.css"/>
  <meta charset="utf-8"/>
</head>

Confirm with your mentor if it is correct.

<header> and <footer> elements, along with the <main> are simply used to better organize our code. It's really that simple. They go in the <body> element.

index.html
<body>
    <header>
    </header>
    <main>
        <!--Copy-paste existing code here-->
    </main>
    <footer>
    </footer>
</body>

Last updated

Was this helpful?