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.
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.
Each section has an open and closing tag that surrounds the section, like this:
1234567 <head><title>This is the page title : my name : important keywords</title></head><body>This is the page content</body>
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.”
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:
1234 <head><title>This is the page title :: my name :: importantkeywords</title></head>
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:
12345 <head><title>This is the page title :: my name :: importantkeywords</head></title>
…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>
12345 <body>Your content herelogos and picturesvideos and textall of your page content</body>
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>
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:
123456789101112 <html><head><title>This is the page title :: my name :: importantkeywords</title></head><body>Your content herelogos and picturesvideos and textall of your page content</body></html>
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:
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.