START A COURSE

The HTML and CSS Blog:

What You Learn in This HTML Lesson

Today you’ll learn the basics of HTML by getting to know the most basic tags that make up every web page: the head tag and the body tag. I’ll use them as examples of how HTML is structured, and you’ll learn where to put these tags in your code, and why they’re on every web page.

head shoulders knees and toes cute

Your Head should always go before your Body tag. [image via Dobrador}

The Head and Body Tags Divide Your Page Into Sections

The first and most basic HTML tags you need to learn to code are the Head and Body. The head tag and body tag are how we break every web page into two sections.

HTML body tag

The Body Tag

 

Each section has an open and closing tag that surrounds the section, like this:

These most basic HTML tags will teach you the rules of all HTML code. Note that it’s important you close every tag. Closing tags in HTML always contain a slash. Note also that none of the letters are capitalized, that is standard in HTML.

FYI: element and tag are interchangeable words, they mean the same thing. I like the word tag because its shorter and easier to say. But you should know that “head tag” and “head element” mean exactly the same thing.

Basic HTML Code: the Head Tag <head>

The <head> section contains elements that are needed by the browser to render our web page, but not something that the person viewing the web page needs to be aware of. Generally it is for stuff that is about the webpage, i.e. meta stuff…much of it is even called “metadata.”

head tag HTML

The Head Tag [image by FutureIsFiction]

For example, the <head> section contains the title of the web page (which is visible at the top of the window, or tab, in the web browser).

The title is important: you see it (rather than the file name) if you save a bookmark or favorite in your browser. It’s also a good place to insert keywords to help search engines understand the content in your site. Paying attention to your page title can help you improve your search results.

Surround your page title with <title> tags, and make sure it is inside the <head> section of your web page, like this:

Notice how the <title> is nested inside the <head> tags. This is another thing that’s not only true of basic HTML code, but is also true of almost ALL HTML tags. When you start a tag inside another tag, it’s important that you close it before you close the first tag. That’s what all this talk about proper nesting is about. For example, if you’d written:

…your code would be all messed up, because the <title> is inside the <head> tag, but ends outside its parent tag. If you are finding errors in your code, check to see that everything is nested properly.

Basic HTML Codes: The Body <body>

HTML body tagAll of the page content falls in the <body> section, surrounded by opening and closing <body> tags. You could think of the body tag as being your “page” tag; it defines the visible page.

like this:

ALL THE THINGS go in the BODY tag

If you grabbed embed code from YouTube or you’re writing your manifesto, or you have a chart of all the one hit wonders from 1872 to the present, it all goes in the <body> tag. Remember: ALL THE THINGS go in the <body> tag. Everything that is, erm, not a thing (i.e. no one will see or interact with it) goes in the <head> tag. Much like on your typical human, the <body> tag is usually much bigger and has more stuff. The body tag has more content because it contains the entire visible page.

The MOST Basic of the Basic HTML Code: <HTML>

The most basic HTML tag: HTML

There’s one more tag that defines the page, and appears in nearly every web page: the <html> tag. This tag surrounds the entire page source; including both the head and body sections. Its purpose is to identify the language for the browser’s sake. Web pages are written with more than one markup and scripting language. HTML, CSS, PHP, and JavaScript might all be used in one web page. Each language has a different role. For example, HTML defines the structure and contains your content, CSS describes the visual presentation of the objects, and JavaScript provides the interactivity. So, the <html> tag simply helps the browser know that what is coming next is in HTML language.

Remember to properly nest all the tags inside the HTML tag.

Basic HTML Codes: Putting it all together

Let’s put all four tags we’ve learned together to make our first web page:

It looks like this:

Brain Snack: You try it!

Learn HTML with this Activity: Practice using these four core tags (<html> <head> <title> <body>)  to define a page. Create a template and save it in your root folder (see previous lesson for tips about file naming best practices).

Make copies of the template to create three web pages. If you don’t have an idea already for three pages you want to make, title them:

home.html

favoritealbums.html

bestbands.html

Type in a page title for each page, and also type at least three paragraphs within the body tags. The next lesson will go over how to structure your text. You can finish these pages in the next lesson by editing the text you create tonight.

The Easiest Way to Learn HTML and CSS
Hi! I'm Diane. I'm an experienced web design teacher in San Francisco. I produce music videos to help new coders learn HTML. I'm dedicated to helping you learn to code, with tons of songs, videos, tutorials and activities. All our tutorials are free and we're adding new lessons every day. Subscribe to get the latest post in your inbox.

HTML Lessons

©2013 Diane Presler. All rights reserved.