Lesson 2: Essential Tags

Overview

There are some basic tags you must add to every HTML document you create. In the previous unit, you created a new file called index.html. In the current lesson you will add a few basic required tags to this file, thereby beginning the construction of your portfolio. These basic tags provide a template for any web page.

Learner Outcomes

At the completion of this exercise:

you will have learned the basic tags required for all HTML documents and be able to create a blank HTML page with all of the essential tags in place.

Activities

Open a text editor program and navigate to the "portfolio" folder you created in the Pre-coding lesson. Open the index.html file.
Type the following markup into your file. This is the basic HTML structure of a web page. Note that you'll personalize the highlighted text contained in the title tags.
```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Web Portfolio: Your Name</title>
  </head>
  <body>
    
  </body>
</html>
```
You may find it easier to read if you add extra blank lines as you see in the example above. Also, indenting content that is inside of other content helps you to see the relationship between all the parts of the page. This is a standard practice for all markup, scripting, and programming languages.

Remember: Extra spaces and blank lines will be ignored when the HTML is displayed by a browser.

Let's now examine each of these tags:
- The first line is the DOCTYPE. It specifies the version of HTML you are using. HTML5 has a very simple DOCTYPE. All prior versions of HTML and XHTML had much longer and complicated DOCTYPE statements, but they can easily be found by searching the web, and can be copied and pasted into your web page. The DOCTYPE statement is necessary because it tells the browser which version of HTML you're using, so the browser knows how to process your code. . A common mistake among web developers is neglecting to include a DOCTYPE statement. Without a DOCTYPE statement, browsers have to guess which version of HTML you're using, and sometimes they get it wrong.
- <html> is typed before all the text in the document. This marks the beginning of the html document. It has a corresponding </html> tag that marks the end of the document. The entire web page, other than the DOCTYPE statement, is wrapped between these two tags.
- <head> Web pages are divided into two main sections: the head and the body. The head provides information about the document, including the author, description, keywords, title, and other information. The head section is closed with the </head> tag. In our "bare bones" document there are only two elements inside the head. They are:
- <title> You must give your document a title. This title doesn't actually appear within the web page, but appears in the title bar of the browser window. This is also the title of the page that will be displayed by default in search engine results or in user's Favorites. The title is closed with </title>
- <meta> is a tag that has many purposes, depending on what attribute it has. In our "bare bones" document, the attribute is charset, which is set to "utf-8". This is a required tag, which tells the browser which character set the web page is encoded in. There are many possible character sets, but "utf-8" is an international character set that is one of the most common. The <meta> tag is not a container tag. Therefore, it has no corresponding closing tag.
- <body> The body section contains the contents of your document
-  Comments are intended solely for people reading the source code, and are not visible when someone views the web page in a browser. See the section below on Comments In Your Code for additional information about this feature.
Save the index.html file. Now open this file in your browser. You will notice that the screen is blank. This is because you don't have any content yet in your body section. However, you should see your title displayed in browser's title bar, usually across the top of the browser window.
Return to the text editor and the index.html file. While you're creating files using the "bare bones" template, you should go ahead and create the other files that will comprise your website. Later in this course, you'll be adding content to each of these pages, but for now they'll be blank, just like the home page. Simply copy the code from index.html and paste it into the new pages. Each time you do this, change the <title> element to reflect the content of the new page. For example, change the title in graphics.html to something like "Web Portfolio: Your Name's Graphics Page". Save each new file in your root folder with the following file names:
- accessibility.html
- graphics.html
- javascript.html
- usability.html
- tools.html
- video.html

Comments In Your Code

The sample HTML code provided and described on this page includes the HTML markup for adding comments:

All computer markup or programming languages provide some method for adding comments to your code. This includes all three of the languages taught in this course: HTML, Cascading Style Sheets (CSS), and JavaScript. The actual method differs depending on the language, but the idea is always the same. Comments are notes to yourself, or to others who view your source code, that help to make the code easier to understand. The web browser simply ignores them, so they aren't actually displayed to users. Add comments liberally! Too many comments is better than too few. Here are the two primary purposes for adding comments to your code:

Use comments to explain your code to others. Often, you will be creating web pages as a member of a team, and other team members may need to read and understand your code. Even if you're the only person working on a particular web page, there may be others later who need to read and understand your code.
Use comments to explain your code to yourself. As you're learning new web design techniques, it can be very helpful to add reminders to yourself as to why you used a particular tag or group of tags.

Resources/Online Documents

All done?

For each page of your site, is the appropriate title displayed in the browser's title bar? After you have saved all your changes to index.html and the other pages, keep your browser and text editor open to the index.html file. Show your instructor your results before starting Lesson 3.