Basic Rules for HTML Code - HTML

Creating HTML documents is actually quite easy—HTML documents are simply text files embedded with HTML commands. You can create the documents with any editor capable of exporting raw text. In addition, HTML browsers are very forgiving about white space—additional tabs, line feeds, or spaces don’t matter.

As you create your first few HTML files, it is important to start using some good coding habits, habits that will serve you well as you code more complex pages later on. For example, consider the practices outlined in the following sections.

Use liberal white space

Insert liberal line breaks to separate code sections, and use spaces to indent subsequent elements. Both of these will help you read and understand your code. Consider the following two code samples:

As you can tell, the second example is much easier to read and, hence, easier to troubleshoot.

Use well-formed HTML

Well-formed HTML means that your documents need to have the following characteristics:

  • Contain a <DOCTYPE> tag
  • Elements must be nested, not overlapping. This means that you need to close elements in the opposite order of how they were opened. For example, the following example is wrong:
<p>The last word is <b>bold</p></b>

Note how the bold and paragraph tags overlap at the end of the block. Instead, the bold tag should have been closed first, as in the following example:

  • <p>The last word is <b>bold</b></p>

    Element and attribute names must be in lowercase. XHTML is case-sensitive; the tag <HR> is different from the tag <hr>. All the tags in the XHTML

Document Type Definitions (DTDs) are lowercase—so your documents’ tags need to be, as well.

  • All non-empty elements must be terminated. For example, the following is not allowed:
This is one paragraph<p>This is another paragraph<p>

Instead, each open paragraph tag needs to be closed.

  • All attribute values must be quoted. For example, consider the two following tags:

The first tag is incorrect because the attribute value is not quoted. The second is correct because the attribute is correctly quoted.

  • You cannot use minimized attributes, that is, attributes without values. For example, consider the two following tags:

    The first tag has a minimized attribute; the checked attribute is named but has no value.

  • Any empty tag must have a closing tag or the opening tag must end with a slash (/). For example, consider the <hr> tag, which doesn’t have a closing tag. As such, it should always appear with an ending slash, <hr />.

Comment your code

Well-written code should speak for itself. However, there are plenty of instances when including comments in your code is warranted. For example, you will learn how to use nested tables to create complex textual layouts. However, such constructs often result in code such as the following:

Without comments, the nested tables are hard to follow. However, adding a few comments allows you to more easily keep track of the nested elements’ purpose:

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

HTML Topics