Add Language, Character Set and SEO Information

Clarifying the human language used for the content in the document.

The web browser needs to know what human language is being used such as English or French for the content. This is done by adding the lang attribute to the html element.

The values for the lang attribute comes from a predefined ISO 639-1 list by the ISO. It defines two character codes for languages.

For example

en … English

fr … French

ge … German

ru … Russian

Activity:

Objective: Define the HTML document language as English.

Setup:

If you successfully completed the last lesson, you can continue using the shell.html file in the practice folder.

If not or have issues, then copy the shell.html file from the checkpoint-01 folder to practice folder and replace if necessary.

The lesson's completed file is shell.html and can be found in the completed folder.

Steps:

In the shell.html file replace …
```
<html>
```
… the following …
```
<html lang="en">
```
Save the shell.html file.

Setting the character set.

The web browser also needs to know what character set is being used. All the characters in a plain text file are actually represented by a number. You just see the characters in your editor because behind the view the software is encoding and decoding the numbers into the characters that you see.

To accomplish this we add the meta element with the charset attribute in the head container.

Common values for the charset attribute are defined by IANA. The value that we use is UTF-8 and can be found at IANA Character Sets if you have any interest.

Activity:

Objective: Define the HTML document character set as UTF-8.

Setup: Continues from last activity in this lesson.

Steps:

In the shell.html file insert on a new line after …
```
<html lang="en">
<head>
```
… the following …
```
	<meta charset="UTF-8">
```
Save the shell.html file.

Adding the HTML document title.

Now you will fix the error for the missing title element. The title element is placed in the head element container. It is considered the "official" title of the document. However, if it is missing or its keywords seem contrary to the document, other content in the document could be substituted.

The number of characters and words in you title element content has an impact on SEO.

Search engines will display the title element content on its results page. The number of characters shown is limited. For example Google shows the first 50 to 60 characters. A SEO best practice is to keep the title under 60 characters.

Another SEO best practice is include the keywords you think a visitor might use to search for a page because they are often emphasized or highlighted on the results page.

Activity:

Setup: Continues from last activity in this lesson.

Steps:

In the shell.html file insert on a new line after …
```
	<meta charset="UTF-8">
```
… the following …
```
	<title>A Shell HTML Document | Lon Hosford</title>
```
Save the shell.html file.

Adding the HTML document description.

You can include a document description using the meta element. It is placed in the head element. The meta element uses the name and content attributes together. There are predefined values for the name attribute that describe the purpose of the information contained in the content attrbute.

To set the document description, the name attribute value is the lower case word description.

The content attribute value is plain text up to about 155 characters.

There are SEM strategies on what makes a great document descriptions that you can learn about in a course on SEO and on the Internet.

Activity:

Setup: Continues from last activity in this lesson.

Steps:

In the shell.html file insert on a new line after …
```
	<title>A Shell HTML Document | Lon Hosford</title>
```
… the following …
```
	<meta name="description" content="Shell file for learning HTML. Modify to a 155 character or less description. Often shows up in search engine results.">
```
Reason why you limit the document description to 155 characters?

The same reason that the title element content is limited. The 155 character limit is based on research of what most search engines will display on their results pages. A good practice is to stay within that limit.

Describe what content you might include in the HTML document description.

It should display content that supports the keywords a person might use in a search engine to find your content. Most or all of those keywords should be in the description. The content of the document also includes and supports those keywords.

You also might have noticed results pages of some search engines may emphasize or highlight the search keywords in the document description.
Save the shell.html file.

Validate the HTML. No errors are expected.

Instructions are in the lesson Selecting Tools for Testing found in the section Your Starter Toolkit for Creating HTML Documents.
Does the shell.html have visible content?
No, but we can still load it into a web browser.

The shell.html file is a bare bones file for starting a new HTML document. It contains the basic SEO elements that software looks for in cataloging the document. We still need to add content which is essential for SEO as well as for humans.
Where in shell.html document will the visible content be inserted?
The content is placed in the body element or more specifically between the <body> and </body> tags.

<body> Visible content goes here! </body>

Complete and Continue