Getting Started With HTML, Part 3
Okay, so quick review! In our first post we covered the doctype declaration, <head>, <title> and <body> elements. In our last post we covered headings, links, line breaks, paragraphs and divisional elements for our <body> tag. You can check out our last tutorial here.
Today we’re going to cover briefly some key elements for the <head> to help provide useful information about your pages.
To review, let’s look at what the most basic head tag looks like:
<!DOCTYPE html>
<html>
<head>
<title>Welcome to my website!</title>
</head>
</html>Not a very exciting page. But today we’re going to focus on making the metadata strong for our page to help us in the rankings and make sure that our page loads appropriately.
The first tag we’re going to learn about is the <meta> tag. Like <br>, it’s self closing, so I’m going to write it as <meta />, though you can omit the syntactic sugar if you like. So first thing’s first, remember that our head is dedicated to metadata, so all of the elements we’re going to learn about today won’t make our page content. Instead they’ll define key characteristics, like the encoding of the page, what the page is about (to help web crawlers and search engines), and link stylesheets so later we can style our pages.
One important characteristic to set is the encoding. Computers have a number of ways to encode characters, and if your file uses one, but the browser has it set differently (or thinks the encoding is one thing, but is really different), you can get what’s known as mojibake, or gibberish. So it’s a good idea to set the encoding explicity. Thankfully, the <meta> tag makes it easy to set. We just set the attribute charset to utf-8. Just plop this line anywhere in the <head> (though not within the <title>!):
<meta charset="utf-8" />Remember that here, in teal, is the attribute (charset), while in red is the value (utf-8). UTF-8 is a set of encoding characters that allows for every point (or character) as defined by Unicode. That means characters from almost any language (こんにちは！), math symbols (like the symbol for union ∪), political symbols (like the hammer and sickle ☭) or even emojis (👍).
Another useful meta type is the description. The description is what’s shown as the byline on Google and other search engine results, so it’s important that your description is concise and accurate. It also helps to write a tag for each page, though that can be hard. But formatting the tag is easy, and takes two attributes: type, and content. The value for our type is description, and the value for content is what we want the description to be. Like the charset exploed above, we can write it and put it anywhere within the head (except within <title>). For example, an encyclopedia about alien hovercrafts might read:
<meta type="description" content="An encyclopedia about
alien hovercrafts, the different types of hovercrafts,
and the aliens that use them." />Note that in the line above I inserted line breaks into the content (though there are spaces after every word). Most crawlers will ignore line breaks and, for that matter, any code you might try to put in there, so the line breaks are really for your own sake, so you don’t have to deal with a long line of text. Just make sure that they’re short: Google will pick the first 150 characters, so make them count! For reference, the example above is 110 characters long.
Finally, the last element we’ll want to work with is the <link> tag. Unlike the <a> tag we looked at last time, the <link> tag does not create clickable links to other pages. Instead, it defines a relationship between the current document and some other external file. We use it typically for CSS stylesheets, which you’ll learn about later – but for now, remember the syntax and keep it handy. The link takes two attributes: href, or hyperlink reference, is the URL to the file you’re linking; and rel, or relationship, a keyword that describes what it is you’re linking. Put it all together:
<link href="/path/to/css/style.css" rel="stylesheet" />Simple! Like the <meta> tags, put it anywhere in the head.
One last thing to teach you, that’s not really an element: comments. Sometimes comments come in the header, either as an easter egg for people hunting through the source, or as a note to yourself. A comment is super simple. Just start with an opening bracket, an exclamation point and then two dashes. Then to close, two dashes followed by a closing bracket. Check it out:
<!-- This is a comment -->This isn’t a tag, rather, it’s a way for you to put notes that will not have any effect on the page. Essentially, the browser ignores the comment altogether regardless of the location of the comment. Note: strange things may happen if you try to put a comment within a tag. You can try it but I can’t guarantee that nothing will happen! Besides, it can look messy to put them within tags. You’re free to put them between tags without repercussions, though.
Now let’s put it all together, to see what a head using everything we’ve learned so far might look like:
<!DOCTYPE html>
<html>
<head>
<title>The Alien Encyclopedia</title>
<meta charset="utf-8" /> <!-- This sets the encoding -->
<meta type="description" content="An encyclopedia about
alien hovercrafts, the different types of hovercrafts,
and the aliens that use them." /> <!-- A byline of copy
for Google search results -->
<link href="/path/to/css/style.css" rel="stylesheet" />
<!-- A CSS sheet that doesn't exist -- but we'll learn about
CSS soon enough! -->
</head>
</html>Wow! We’re certainly getting far now. Today we learned how to set the encoding and provide a page description using <meta> tags. We also learned how to create stylesheet links and write comments. Next time we’ll learn some more elements for our <body> tag and then after that, we’ll begin to explore CSS.
