Phoenix Project #3 - All in Your Head

Objective

So today, we are going to fill out some of the important metadata you need in the head section of your HTML document.


Process

So, you should be working with your basic HTML skeleton, because we're going to be working as a continuation of that.

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

The first thing you want to do is declare what language this website is going to be using. This is done with adding a language attribute to your opening HTML-element.

<html lang="en-us">

Along with language, you need to inform the browsers what kind of characters are needed to be displayed. This is used with a meta tag with a charset attribute. For 95% of you, you will be using the utf-8 character set. 

<meta charset="utf-8">

Lastly, we move on to the title element. This is the title of the webpage, not the website. Not saying you can't put the name of your website, but if you're running a blog or a website with constantly new generated content, having a specific title for that page is a benefit to those of us who use tabs in browsers.

<title>Singed Phoenix - Phoenix Projects</title>

So what you should have now, looks like this...

<!DOCTYPE html>
<html lang="en-us"> 
    
       <head>
        <meta charset="utf-8"> 
        <title>Singed Phoenix Profile</title> 
    </head>
    
    <body>  
    </body>
</html>

Uh-oh's and WTF's

I ran into no problems with this, as it's pretty straightforward...but this is where year's of practice come into play. 

As with the skeleton, check for common errors like not closing a bracket and spelling issues.


Final Thoughts

So far, we've performed the tasks that you will do a million times in your programming efforts. Well, unless you're like me where you're lazy and you just have pre-made templates on the ready and fill...but I'll share that secret with you later.

For right now, create a few different HTML documents to get the feel of the practice of creating new sites. I promise you, the more you practice and engage with the material, the easier this all becomes.


Git the Code


Highlighted Features