HTML HTML intro.
  1. HTML intro
  2. Web pages and you
HTML basics
  1. HTML getting started
  2. HTML basics
  3. HTML document
HTML text
  1. HTML text formatting 1
  2. HTML text formatting 2
  3. HTML text formatting 3
  4. HTML fonts
  5. HTML entities
HTML links
  1. HTML links
  2. HTML email links
HTML images
  1. HTML images
  2. HTML image maps
HTML forms
  1. HTML forms
  2. HTML form labels
  3. HTML fieldset/legend
HTML tables
  1. HTML tables
  2. HTML tables concepts
HTML frames
  1. HTML frames
HTML backgrounds/color
  1. HTML backgrounds
  2. HTML colors
  3. HTML color shades
  4. HTML color usage
HTML style/layout
  1. HTML stylesheets
  2. HTML div/span
HTML media
  1. HTML audio
  2. HTML video
  3. HTML objects
  4. HTML download media
HTML declaratives
  1. HTML head section
  2. HTML meta tags
  3. HTML scripts
  4. HTML declarations
  5. HTML document types
Practical HTML
  1. HTML tag rules
  2. HTML things to avoid
  3. URL formatting
  4. URL encoding/decoding
  5. HTML use/access
  6. HTML publish work
HTML extras
  1. HTML marquees
HTML wrap-up
  1. HTML history
  2. HTML summary

HTML tag rules

There exists a certain set of rules when working with HTML tags that you should follow if you want your pages to validate with an HTML validator. While your pages may still display as you intend them to display even if you break one or more of these rules, the code will not be semantic. The goal is to have valid code as well as display a webpage as intended.

This tutorial focuses on:

Correct tag order

Keep track of your code to make sure that there exists a proper tag order. If you are working with a large set of code, it can sometimes get confusing, so keep track of your code as you're working with it so you don't get lost in it.

Example of incorrect tag order:
<html> <head> <title>Incorrect tag order</title> </head> <body> <p> <b>Correct tag order</p> <br /> Important to keep your code valid </b> </body> </html>
FIXED:
<html> <head> <title>Incorrect tag order</title> </head> <body> <p> <b>Correct tag order</b> <br /> Important to keep your code valid </p> </body> </html>

Lowercase tags

ALL tags AND attributes (as well as attribute values) in HTML should be lowercase.

Example of using uppercase tags and attributes:
<html> <head> <TITLE>Uppercase tags and attributes</TITLE> </head> <body> <P>HTML is cool</P> <br /> <a HREF="http://www.yahoo.com" TARGET="_blank">Yahoo search engine</a> </body> </html>
FIXED:
<html> <head> <title>Uppercase tags and attributes</title> </head> <body> <p>HTML is cool</p> <br /> <a href="http://www.yahoo.com" target="_blank">Yahoo search engine</a> </body> </html>

Closing tags

Tags should always be closed. An unclosed tag can lead to strange results that can be tedious and sometimes confusing to fix. For example, not closing the <a> can result in a much bigger chunk of text turning into a link than you were going for.

Example of not closing tags:
<html> <head> <title>Closing tags</title> </head> <body> <a href="http://www.yahoo.com" target="_blank">Yahoo search engine <br /> Here is some text </body> </html>
Output:

Notice how in the above example the text "Here is some text" becomes part of the link even though that's not what we intended. This happened because we did not close the <a> tag.

The above example fixed:
<html> <head> <title>Closing tags</title> </head> <body> <a href="http://www.yahoo.com" target="_blank">Yahoo search engine</a> <br /> Here is some text </body> </html>
Output:
Yahoo search engine Here is some text

In this example, the text "Yahoo search engine" is the link, and the text "Here is some text" remains regular text like we intended.

Tags that have no end tags

What about tags that have no end tags?

Remember that those tags end with a / character.

<img src="apple.jpg" alt="apple" /> <hr /> <br /> <meta name="keywords" content="softcover books, hardcover books, literature" />

Quoting attributes

Attributes should always be quoted. Even though a page may appear as you intend it to even if you don't quote attributes, the page will not validate with an HTML validator. Also, if the value given to the attribute has at least one space, the page may actually not appear as you intend it to.

Example of not quoting attributes:
<html> <head> <title>Quoting attributes</title> </head> <body> <input type="button" value=I am a button /> <br /> <a href=http://www.yahoo.com target="_blank">Yahoo search engine</a> </body> </html>
Output:

In the above example, we omitted quotes from the value attribute of the <input> tag which in this case displays a button. The text that is supposed to be displayed on the button is "I am a button", but only "I" is displayed since it cuts off after the space. For the href attribute in the <a> tag, we omitted quotes as well, but it still works as intended.

The above example fixed:
<html> <head> <title>Quoting attributes</title> </head> <body> <input type="button" value="I am a button" /> <br /><br /> <a href="http://www.yahoo.com" target="_blank">Yahoo search engine</a> </body> </html>
Output:
© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information