Skip to Navigation. | Skip to Main Content. | Skip to Search Form.

Web Developer Resources - HTML Tips and Tricks Related Topics:

HTML Tips and Tricks

The HTML title tag:

The HTML <title> element is designed to provide a short piece of text that should stand for the document in cases such as:

window title bars
bookmark lists
result lists from search services

Tips for page titles:

The closer the word is to the start, the more heavily weighted it is as a keyword.
Keep the title text between 5 - 65 characters in length.
For greatest efficiency and consistency, write titles using this syntax:
keyword phrase, category, web site title (or brand)
Title text unique on every page.

top of page

Meta description tag:

Create unique descriptions for each page, using keywords specific to that page
Keep the description text between 25 and 150 characters in length
Do not copy title tag text content as a description tags; this is a wasted opportunity to develop more keywords and adds no value.
Make the description text unique on every page.

top of page

Meta keyword tag:

Choose words that may be secondary keyword terms (save the primary keywords for use in the <title> and <meta> description tags), and even include a few, commonly seen typographical errors of primary keywords, just for good measure
Limit your keyword and key phrase text, separated by commas, to no more than 874 characters
Don’t repeat a keyword more than 4 times among the keywords and phrases in the list

top of page

Meta content-type tag:

UTF-8 most common choice used; more international.

top of page

Link tags

The <link> tag with the canonical attribute also falls within the <head> tag. It’s used to establish the canonical URL for a webpage (which is helpful for the search engines to know). Below is a sample of the code for reference.

top of page

Always add a trailing slash to sub-folder references:

If you link like this: href="http://www.w3schools.com/html", you will generate two HTTP requests to the server, because the server will add a slash to the address and create a new request like this: href="http://www.w3schools.com/html/"

top of page

Dynamic Hypertext Markup Language (DHTML)

DHTML, or Dynamic Hypertext Markup Language is a marketing term coined by Netscape and Microsoft to describe a series of technologies introduced in their Version 4.0 Web browsers; such technologies may incorporate HTML, CSS, javascript, etc. to achieve "dynamic" web pages.

top of page

XHTML 1.0 Required Standards:

Requirements by W3C for XHTML 1.0 standards include:

XHTML elements must be properly nested,
documents must be well-formed,
tag names must be in lowercase, and
all elements must be closed.

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Web Page Title</title> <meta name="description" content="University of Memphis ..." /> <meta name="keywords" content="university of memphis, memphis, tennessee" /> </head> <body> ... </body> </html>

Also, XHTML:

attribute values must be delimited with quotes; double or single,
Example:
Incorrect: <table summary=University of Memphis, Memphis, TN 38152.>Correct: <table summary="University of Memphis, Memphis, TN 38152.">
attribute minimization is forbidden,
Example:
Incorrect: <option selected>Quick Links</option>Correct: <option selected="selected">Quick Links</option>
the id attribute replaces the name attribute,
Example:
Incorrect: <input name="searchterms" type="text" alt="search terms" />Correct: <input type="text" alt="search terms" id="searchterms" />
the XHTML DTD defines mandatory elements.

The <!DOCTYPE > is mandatory in XHTML.

XHTML Strict DTD
Use this DTD when you want clean markup, free of presentational clutter. Use this together with Cascading Style Sheets (CSS):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML Transitional DTD
Use this DTD when you need to use XHTML's presentational features because your readers don't have browsers that support Cascading Style Sheets (CSS):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML Frameset DTD
Use this DTD when you want to use frames!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML standalone or self-closing tags use the format <br /> or <hr/> to properly close them. Also included are:

<img ... />
<br />
<hr />
<input ... />
<meta ... />
<link ... />

Note: the empty space before the "/" is not necessarily required; it is used as a "safe guard" for older browser versions.

HTML <img> tags require alt="", width="" and height="" properties to validate as XHTML 1.0.

HTML <table> tags require summary="" property to validate as XHTML 1.0; and end the summary with a period! for web page readers.

top of page

HTML Accesskeys:

HTML attribute <a href="" accesskey=""></a> gives your clients the ability to set focus to your defined hyperlinks / values for your allotted definitions. As an example, a site might use this feature, select the Alt-h (Windows) or Cmd-h (Mac) keys simultaneously to set focus for this site's home page; "h" equates to "home". Select Alt-m / Cmd-m in conjunction with the "m" key sets focus for links to the University of Memphis web site; "m" equates to "memphis".

Access keys could be defined for a site as:

Accesskey "1": Main Content
Accesskey "2": Search
Accesskey "3": Main Navigation Bar
Accesskey "H": Home
Accesskey "M": University of Memphis Home

XHTML 1.0 became an official W3C recommendation January 26, 2000.

XHTML stands for Extensible Hypertext Markup Language.

XSL in Internet Explorer 5 is not compatible with the official W3C XSL recommendation.

top of page

Rowspans Made Easy (1)

If you have a cell that spans vertically to the bottom of the table, past rows that might vary in number or are too numerous to easily count, just give it a rowspan that you know is excessively high; in the example below, 99. Browser specification states that browsers shouldn't create any extra rows.

	It
	doesn't
	matter
	how
	many
	rows
	are
	here.

example:

<table border="1" bgcolor="#cccccc" cellspacing="1" cellpadding="1">

<tr> <td width="10%" bgcolor="red" rowspan="99"> </td> <td>It</td> </tr> <tr> <td>doesn't</td> </tr> <tr> <td>matter</td> </tr> <tr> <td>how</td> </tr> <tr> <td>many</td> </tr> <tr> <td>rows</td> </tr> <tr> <td>are</td> </tr> <tr> <td>here.</td> </tr> </table>

top of page

How to include Flash without using the <embed> tag

Embed Flash or Die Trying

What is the HTML object tag

top of page

How to incorporate accessible inline frames <iframe>

Creating Accessible Frames, Inline Frame (iframe) Accessibility

top of page

When using hyperlinks, if you open a new browser window, alert your client that you're doing so; <a target="_blank" title="opens a new window">

Links to New Windows, Pop-ups, Other Frames, or External Web Sites

Example:
<td width="140"><a href="https://my.memphis.edu/" target="_blank" title="myMemphis portal (link opens new window)."> <img height="50" width="140" alt="myMemphis portal logo" src="images/mymemphis.jpg" /></a> </td>

top of page

It's all about semantics.

Creating Semantic Structure

Summary:
Do NOT use HTML tags when attempting to achieve visual effects.

Examples:

<h1> - <h6>
Do NOT use text formatting, such as font size or bold to give the visual appearance of headings - use actual heading for all content headings. Likewise, do not use headers to achieve visual results only - use <strong> or <em> tags or CSS styles to achieve visual appearances.
NOTE: Make sure your header tags are ordered correctly; ascending order.

<blockquote> - </blockquote>
Use blockquotes if the text within is truly a quote.
Do NOT use this tag for purposes of creating a visual indentation.
DO use CSS margins instead: <div style="margin:5%"></div>.

<b> - </b>
Bold tags connote visual emphasis, strong suggest semantic emphasis.
Do NOT use bold tags.
Do use <strong></strong> tags instead.

<i> - </i>
Italics tags connote visual emphasis, emphasis suggest semantic emphasis.
Do NOT use italics tags.
Do use <em></em> tags instead.