Benefits of having Consistent Style
As we learned in the last lesson, HTML5 is a lenient language and allows for different styles of writing code. Many people who switched over to XHTML still write web pages today in a similar style. However, this does require some extra effort from the developer. This is especially true if the developer is not taking advantage of an advanced editor. Many of the problems like mismatching tags, missing end tags and potentially erroneous code are easily identifiable in editors that have Syntax Highlighting. Many editors have features link auto-generation of end tags and quotes. So choosing the right code editor could save some hassles and lead to well-formed code. The well-formed code does not necessarily mean XHTML compliant code. It is meant for code that complies with the HTML5 standards.
Doctype
The Doctype has been used in previous generations for providing additional validation information. This information about the document was typically a reference to a standard file from W3C. In the past, this used to be a nightmare for developers. The Doctype format was difficult to write from memory for many people. Most developers copied the code from the documentation or from their previous pages. Fortunately HTML5 has the shortest and easiest Doctype available. If the Doctype is omitted then browsers switch to a mode known as quirks mode. In this mode, the browsers try to behave like browsers from the past for displaying older versions of HTML. If we omit the Doctype in our web pages then it may not be displayed. We recommend including the Doctype at the beginning of all pages.
<!DOCTYPE html>
Lower Case
HTML5 is not case sensitive. This means that we can use both upper and lower case letters. But for the sake of consistency, we need to stick with one format. Since there were no editors with Syntax Highlighting features in the early days, developers used upper case for elements and attribute to differentiate them from content. This is not required now since editors with Syntax Highlighting are widespread. It may be beneficial to use a lower case because they are easier to type.
<p id="unique">This paragraph is unique.</p>
Quotes
HTML5 allows for both single and double quotes for quoting attribute values. It also allows for omitting them in certain situations. But this is not recommended. Choosing one of the two and using them throughout the project is the best solution. An example of using single quotes.
<p class='red'>This is a red paragraph.</p>
Also, we can use double quotes.
<p class="red">This is a red paragraph.</p>
Always use the same type of quote. Mixing them can lead to breaking the page.
Closing Elements
HTML5 does not require elements to be closed. This is not good practice. We should at least close the nonempty elements.
<p>This is a paragraph.</p>
Empty attributes can be closed within the starting tag. This can be useful if you use any XML software to parse HTML web pages. Otherwise, we can safely use empty elements without closing.
<img src="example.png" alt="Example Image">
Images
Images should always be provided with alternate text and dimensions. If the height and width are specified then the browser will allocate the space for the image. This can reduce page flickering.
<img src="example.png" alt="Example Image" style="width:300px;height:300px">
Empty Attributes
In HTML5 it is valid to have empty attributes. We can take advantage of this liberty to have cleaner code.
<input type="text" disabled>
Indenting Code
HTML5 ignores extra whitespace. We can take advantage of this by making our code more readable by padding lines and indenting code to reflect the document structure. Many editors indent code by default. When it is time for deployment these HTML files can be minified and compressed for better performance.
<select> <option value="red">Red</option> <option value="blue">Blue</option> </section>
Title element
The title element should be always specified. The title element has other uses like SEO and bookmarks. So we recommend specifying a descriptive title element for every page.
Scripts at bottom
The script elements should be provided at the end of the page right before the closing body tag. This allows for the page to be loaded before requesting for the scripts.
File names
All the web pages written in HTML should have the extension .html or .htm. We recommend using lower case for file names. Different servers have different policies for file names. Some servers are case insensitive while others are case sensitive. This can lead to problems when the filename on the server and file name in the link do not match.