• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 12. Editing the Code > Meta Tags and Comments

Meta Tags and Comments

You can insert certain elements into your code that will not be displayed in a browser, but are nonetheless important to the document. Meta tags and HTML comments are two examples of these kinds of elements. Meta tags are used for many purposes: they identify and describe documents, provide copyright information, identify the authors or creators, redirect visitors to different pages, control the appearance of the document summary in some search engines, as well as affect ranking within search engines. HTML Comments are used to make notes in the code, to indicate or explain the use of a particular section of code, or to disable a portion of the document without actually deleting the code.

Choose View > Head Content.

The Head Content area appears right above the Design View pane. This is where icons will appear for items that are located in the head of your document, between the <head> and </head> tags. At this point the items contained in this area include icons for the title of the document, the meta http-equiv tag, and the portions of JavaScript that are required to appear in the head of the document.


As you click the icons in the head pane, the corresponding code for those items will highlight in the Code View pane.

You must be in either Design View or split Code and Design Views in order to view this head content area. If you are in Code View, the View > Head Content option will be unavailable. For this exercise, you should use split Code and Design View.

Click the View Options icon on the document toolbar and choose Design View on Top. From the same View Options menu, verify that the line numbers option is turned on. Place the pointer over the bar that separates the Design and Code Views. When the pointer turns into a line with double arrows, click and drag the bar upward to enlarge the Code View and shrink the Design View.

You can now see the head content near the top of your document window, just above the Design View pane. You also now have only a minimal amount of the Design View pane showing, and you can easily see the corresponding code in the Code View when selecting the head area icons.

In the Code View pane, place the insertion point at the end of line 4, which contains the title of the document, just after the </title> tag, and then press Return (Macintosh) or Enter (Windows). On the Insert bar, click the Description icon located in the Head tab.

The Description dialog box opens with a text field in which you can type a description of your page. The description meta tag, used to give a brief synopsis to identify your page, is included in search results displayed by some search engines. Adding the description meta tag to your pages is an important part of site promotion.

Type Learn how lighthouses have played a key role in maritime history. Click OK.

Descriptions should be short—200 characters or less. Most search engines have a cut-off, anything more than their limit will not be used. A good description is a very short, concise indication of the contents of the document.

The insertion point should now be at the beginning of line 6. Click the Keywords icon on the Head tab of the Insert bar. Type lighthouses, maritime history, lens, keepers, fuel cells into the Keywords text field.

When developing a list of keywords, you can separate individual words or phrases by commas. Do not repeat the same keyword or phrase over again—using “lighthouse lighthouse lighthouse lighthouse” as a keyword list is considered spamming because of the repetition of the word “lighthouse.” Keywords should be representative of what is on your page and also be words that are actually used on your page.

Enlarge the Design View pane of your document window by moving the bar between the Design View and the Code View. Place the cursor at the beginning of the paragraph containing the fuel cells link. On the Insert bar, click the Comment icon located on the Common tab.

The Comment dialog box opens.

An HTML comment is text that is placed in the code that the browsers do not read. Comments are not visible to the visitors of your site—unless they look at the source code of your document.

Type Lightsource Information and click OK.

The Comment icon appears in the document window and <!--Lightsource Information --> is inserted into the code.


Selecting the Comment icon will allow you to edit the comment in the Property inspector.

Comments are often used to mark sections of code in order to indicate the function of that code or to make note of copyright information on certain scripts or other content.

Choose View > Head Content to remove the checkmark next to the Head Content view option.

The Head area disappears. The rest of this book assumes that you have the Head Content view option turned off.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint