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
- 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.
ALL tags AND attributes (as well as attribute values) in HTML should be lowercase.
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.
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.
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.
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.
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.