What's That Stuff at the Top of an HTML5 Document?
If you're just getting started in HTML, all that code at the top of the documents can seem a little crazy, but really every line has a specific purpose. Simply put, all that stuff at the top of your HTML5 document holds all the information the browser needs to know how to think about the HTML document. They're what's always loaded and run first by the browser. Generally, the information found at the top of an HTML document, before the body, doesn't display on web pages. So what's the purpose of all that code, and why does the browser need it?
If you're using an advanced HTML editor like Dreamweaver, this part of the HTML document is usually inserted for you. You don't need to add it again, but it's helpful to understand why that code is there.
Let's start with what comes before the head element:
<!DOCTYPE html>The
<!DOCTYPE html> tag is required for HTML5 and should always be the very first thing in your HTML document. This helps the browser know which version of HTML you're using. The browser will still recognize it even in lowercase or camel case, but it's recommended that it should be written exactly as <!DOCTYPE html>.
<html lang="en">It might seem redundant that you're putting
<html> directly after <!DOCTYPE html>, but this tag serves a different purpose. You may have noticed that <!DOCTYPE html> doesn't include a closing tag. This is because the browser doesn't need any more information than the doctype. However, the <html> tag does include a closing tag. You'll put all of your code for the page within this tag so the browser will know where your HTML is beginning and ending. The last tag on your page should be </html>.
The html tag can also have attributes, which tell the browser a little more information about your HTML. The "lang" attribute tells the browser what language your content is in, which also helps search engines direct users to the pages in their language. W3Schools has a complete list of language codes.
<head>The head of your HTML document contains a lot of information for not only the browser, but for search engines. Within this tag you'll find keywords, descriptions, the title and meta tags. Everything in this section, except the title tag, won't be visible to your user. The head element of an HTML page can have lines and lines of code. We'll just cover some of the most basic. As your coding prowess develops, you'll probably need to add scripting tags for JavaScript or jQuery, or more specific meta tags.
<meta charset ="utf-8">In HTML5, meta tags are considered void elements, meaning they can't have any content, so there's no closing tag necessary. Meta tags help search engines find your site and provide information about your web page. You can add your name, the programs used to create the page or descriptions for search engines. The most important meta tag to include is the character set, and it should be the first line in the head element. The attribute is "charset". You'll almost always use the attribute "utf-8" which is Unicode, or the "universal alphabet." This is a set of characters that cover almost all writing systems in the world. The "utf-8" attribute will make it possible for your special character like accents, quotations, or even hyphens to display correctly instead of looking like crazy gibberish. Putting this little line of code in your head element first can help to prevent hackers from altering your site, since it's easier for them to manipulate the sites without an encoding like "utf-8".
<meta name="description" content="Best site ever">This will offer the search engines descriptions of your site. What's written in the meta description is often found on search engine result pages (SERPs) to show a preview snippet for your page. The best length for search engines is 155 characters. Try to think of the best way to convey the content on your page to make a user want to click on your site first.
<title>Within title tag you'll put, you guessed it, the title of your page. Technically, the title is the only element required to be in the head. The text you put in the title tag usually shows up in the browser's title bar and would be the default name for bookmarks. It's also the first way search engines catalog sites. A great practice to follow here is to put more than something like
<title>About</title> if you're creating the "About" page for your site. You'd want to write something more like: <title>About | Digital-Tutors</title> to help give the search engines some context.
<link href="main.css" type="text/css" rel="stylesheet"></link>You'd also need to link to your CSS file. You may have learned styling by adding styles directly into your HTML document. If you're working on an extremely small and static site, then that might be ok, but if you're working on a site with a lot of elements and pages, then you'll have a CSS file or folder that you need to tell your HTML file to access. The link element for CSS has a bunch of different attributes. The "href" attribute tells the browser where to find the file. The "type" attribute tells the browser what the file is and the "rel" attribute tells the browser what the relationship to the linked file has to the file it's in now. In HTML5 the "type" attribute is no longer necessary since the default value is "text/css", but you'll see it still included in almost every link element.
<link type="text/css" rel="stylesheet"href="http://fonts.googleapis.com/css?family=Pacifico"></link>Similarly to the CSS link, you may need to link to fonts you're using on your site. Here's where you can add references to the fonts you've used. Something like this link type will embed a font collection from Google Fonts, which is an awesome resource. Google Fonts will give you exactly what you need to put in your HTML document.
<body>The final tag that's necessary for an HTML document is the body tag. Here's where you'll add all your content that the user will see, like the header, navigation and paragraphs. Don't forget to always close the body tag before you close your HTML tag. Now that you're a little more familiar with the HTML tags at the beginning of your HTML5 document, you might want to check out our web training to see these tags in action. If you'd like to learn more terms about web design and what they mean, we've compiled a PDF of common terms you'll come across in the world of web design:
