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 lesson focuses on:
- Correct tag order
- Lowercase tags
- Closing tags
- Quoting attributes
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:
The above example fixed:
Lowercase tags
ALL tags AND attributes (as well as attribute values) in HTML should be lowercase.
While having tags and/or attributes in uppercase will result in a validated page if you're using the Transitional DTD or the Frameset DTD, it will not result in a validated page if you're using the Strict DTD.
As deprecated features become less and less popular, one day all HTML documents will use the Strict DTD. It is good to get into the habit of using the Strict DTD convention now, as it will one day be the norm.
Example of using uppercase tags and attributes
The above example fixed:
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:
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:
Output:
In this example, the text "Yahoo search engine" is the link, and the text "Here is some text" remains as 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.
Example:
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:
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:
Output:
