Jan 16

6 Tags all HTML Designers Should Know.

Web Wednesday Add comments

Title Tags { <title></title> }

  • What: The Title tags provide a unique name for your web page. They live in head of your web page. They are not visible on your page
  • Why: It is displayed by the browser window and is used when the page is bookmarked. Also, the information between the title tags can be used by search engines. At Pellissippi State, the title of the web page is the FIRST item cataloged by our local search engine.
  • How:  In a text editor (Notepad, etc), open the HTML file and edit the words between the title tags. In Netscape Composer, choose “Page Colors and Properties” from the Format menu. Under the General tab is a space for the page title.
  • Hints: Try to be descriptive with the title so it will make sense in a list of bookmarks. It can also provide a sense of place in a large site by listing the site name and page name. One example: Yahoo! and its use of  title tags to show the path for the page


Image Tag Attributes { <img src=”filename.gif” height=”xx” width=”xx” alt=”description here> }

  • What: The attributes for the image tag are easy to overlook. Height and Width refer to the size of  the image. the Alt tag is for alternative text that describes the image.
  • Why: If your web page viewers are viewing with the image files turned off, then using the width and  height tags will allow the text to still flow around the same size space. The ALT tag is essential for  accessibility for visually impaired visitors to the page. Additionally, some search indexes will use the  ALT tags for part of the page content.
  • How:  In a text editor (Notepad, etc), open the HTML file and edit or add the attributes to each img src tag. Finding the size of the images might require opening them in a graphic editor. In Netscape Composer, right click on the image to open the Image Properties dialog box. Alt Text can be added by clicking the Alt Text/LowRes… button in the lower center of the box. Height and width attributes are entered automatically
  • Hints: The description should provide a suitable textual alternative of the picture. If you are using images for design, purposes, consider how it will be read by a screen reader. Using  ALT=”*” is fine for bullets but other images might not require any description.

Paragraph and Line Breaks { <p> vs. <br>}

  • What: The paragraph tag <p> is the equivelent of hitting return twice as you do between paragraphs  in a single spaced document. The break tag <br> is the equivalent of going down one line.
  • Why: These two tags are helpful to know when you are trying to make lines of text closer together  or farther apart.
  • How:  In a text editor (Notepad, etc), open the HTML file and add the tags between text.  In Netscape Composer,to create a <P> tag, you press the Enter key. To create a <br> tag, you hold  down the Shift key as you press the Enter key.

End or Closing Tags {for example: </a>, </font>  and </i>}

  • What: Most tags require a closing tag to signify when their “effect” is to end. This lets the browser know when to stop
  • displaying italic or bold text, links and other
  • Why: Without the appropriate closing tag, the browser will either do its best to display the page or “break” the page where  the error occurs. This can affect both the appearance of the page and/or the availability of your content
  • How:  In a text editor (Notepad, etc), open the HTML file and ensure the tags that require closing tags have them and they
  • are properly nested.  In Netscape Composer, the tags should be properly closed and nested. Sometimes with extensive editing or complex
  • tables, things can get messy and manual editing is required.
  • Hints: If you easily get lost in the code, try to make it neater in the text file by placing tags on single lines and indenting  the code to see the “matches” easier.

Meta Tags: Description

  • What: The meta tags are listed in the head of your web page and are not visible inside the web browser. They do not have  any closing tags.
  • Why: Description meta tags are used to give an exact description of the page. Many search engines use the meta tags
  • for indexing and displaying search results. For the Pellissippi State local search engine, the description is returned in the
  • display of hits.
  • How:  In a text editor (Notepad, etc), open the HTML file and add the meta tag for keywords using the following format:
  • <meta name = “description” content= “write your description here”>  In Netscape Composer, select Page Colors and Properties from the Format menu. Select the META tag tab. Use  the Name and Value boxes in the bottom half of the box to add Descrptions to your page.
  • Hints: Try to be very descriptive in the text so searchers will be able to tell if your page is relevant to their needs. This
  • does not necessarily have to be the same text as the first few sentences of your page.

Meta Tags: Keywords

  • What: See above
  • Why: Keyword Meta tags provide cataloging information for the page. Many search engines use the meta tags for indexing
  • and displaying search results. For the Pellissippi State local search engine, the description is returned in the display of  hits.
  • How:  In a text editor (Notepad, etc), open the HTML file and add the meta tag for keywords using the following format: <meta name= “keyword” content= “keyword,keyword,keyword phrase”>  In Netscape Composer, see above but use Keyword for the Name
  • Hints: Think of different ways people might search for your information and include them in the keywords listing. Also,  consider common misspellings and include them in the keywords to help provide hits when searches are conducted with  misspelled words.  Example: View the source of the Pellissippi State Home page to see how the Keywords and Description are created.

Comments are closed.