Summary -
In this topic, we described about the below sections -
Why style guide is used?
Large and medium software projects/companies set a standard for coding that requires everyone to follow to make consistency in coding and for better understanding to others.
These standards contain various set of rules and guidelines. These standards also called as a style guides.
Highly large and medium software projects have a style guide concept to make sure various designers write code in a consistent way. Style guides document contains coding rules applies on variable names, the code indentation, and topics like file names. It is a great practice to organize our website. so that it becomes simple for the developer to understand the content written.
HTML document has not frequently modified and once styled; it won’t touch again. So many web developers switched from HTML to XHTML in between 2000 and 2009 due to this.
XHTML follows strict rules and well-developed syntax when the code was applied. Hence it becomes more complicated for the developers to use it. On the other hand, HTML5 is flexible and there are no hard and fast rules.
What is HTML5 style guide?
HTML5 style guide contain coding standards that are defined to maintain coding consistency. A style guide creates standard style needs to enhance interaction by ensuring stability of both within a document and throughout various documents.
Since practices differ, a style guide may set criteria to use in areas such as formatting of numbers and dates, citing sources, punctuation, capitalization, table appearance and other areas.
The style guide may need some finest practices in usage, visual composition, language composition, typography and orthography.
For academic and scientific documents, a guide may also implement best practice in moral values (like research ethics, authorship and disclosure), training (such as discussion and clearness), and compliance (scientific and supervisory).
Advantages -
Style guide provides three types of advantages that makes improve the style guide efficient, which is shown below -
- Code that's simpler to read
- Reliable style options greatly benefit readability. For example, Indentation reliably conveys the shape of your code.
- Flexible naming rules accept you to instantly see that loginDialog is a class instance and LOGIN_DIALOG is a constant.
- Clear-cut guidelines when writing code
- While writing code, style guides decrease the number of options for a designer. This accepts them to concentrate on the program's logic instead of getting style decisions.
- Predictable file and variable names
- Finally, the most crucial benefit is that style guides make our components extra inevitable.
We will discuss some common rules of HTML5 standard style guide below
Doctype declaration
The doctype declaration always located in the first line of the html document. Consider the following code -
<!DOCTYPE html>
Use lower case element names
HTML5 accesses the combination of both upper case and lower-case letters in the element names. However, it is not a perfect way because upper case letters are very critical to write, and the code is not clear and tidy. On the other hand, the lower-case letters are very simple to write.
Consider the below elements -
<header>...</HEADER>
or
<HEADER>...</HEADER>
We can observe the above elements the starting tag in the lower case and the ending tag in the upper case. Hence this is not a good practice in coding and the suggestable code should be like -
<header>...</header>
Consider the below elements -
<header>
<p>welcome to India </p>
</HEADER>
The better way to write the starting tag and the ending tag both should be in lower case and the modified code as follows -
<header>
<h1> welcome to India </h1>
</header>
All html elements should be closed
In HTML5, there are some elements that doesn’t require the closing tag. For example, paragraph element. Paragraph element doesn’t require to close it because the previous paragraph element considered to be closed automatically whenever a new paragraph element started. It is recommended practice to close all the html elements and tags even though they don’t require closing.
Consider the following example -
<header>
<h1> style guide </h1>
</header>
Close empty html elements
In the html document, it is not essential to close empty elements. There is a "/ (slash)" should be coded at the end of the empty tags when they are finished.
This is mandatory in the xml or xhtml. Consider the following example -
<br> or <br/>
The above both syntaxes are valid when the input element is empty, and it should be closed as follows if it is not empty -
<input type="submit" value="submit" />
Attribute names
HTML5 allows the combination of both upper case and lower-case letters in the attribute names. However, it is not a perfect practice because upper-case letters are very critical to write, the code is not clear and tidy. So, the lower-case letters are very simple and contain uniformity -
Attributes should be like this -
<input type="text" value="user">
Instead of -
<input type="text" VALUE="USER">
Quote attribute values
In HTML5, the elements must be written in double quotes or single quotes. This is not a perfect way as it makes very hard for the users to recognize the value of the attributes when you are not using quotes. Quoted attribute values are very simple to understand.
Attribute values should like below
<input type="text" value="user">
Instead of -
<input type="text" VALUE="USER">
Image attributes
HTML5 allows the use of alt attribute to image, when you are adding an image to your html document. When the image does not appear for some reasons, we can use alt attribute to display some text information instead. We can also specify the width and height of the picture using this attribute.
It reduces flashing since the browser knows that how much space is to be reserved for the picture before loading. Better way of using img tag as follows -
<img src="URL" alt="The alternative text for image" style=
"width:250px; height:230px" >
Instead of
<img src="URL">
Spaces and equal signs
In the html, there are no hard and fast rules, or it is not mandatory to produce spaces around the equal sign when giving the values to attributes. However, it is good not to produce a space in between values and attributes because user understands it very easily when they are grouped together.
Better way of using tag values as follows -
<input type="text" value="user">
Instead of
<input type = "text" value = "user" >
Avoid long code lines
Coding lines more than 80 characters should get avoided while coding the html document. Because it will become very hard for the users to scroll right and left.
Indentation and block line
In the html document, do not left the blank line without a reason, as it will not increase the readability of code. A blank line requires to add when the similar type of elements ended or when the paragraph is ended.
Indentation and block line explained in the following example -
Write the better code as -
<html>
<body>
<p>Blockquote is used to indent the text</p>
<blockquote>user1 user2 user3</blockquote>
</body>
</html>
Instead of -
<html>
<body>
<p>Blockquote is used to indent the text</p>
< blockquote>User1 user2 user3</blockquote>
</body>
</html>
Omitting <html> and <body>
Using <html> and the <body> tags are not needed; they can be removed. That results the following code -
<!DOCTYPE html>
<head>
<title>paper title </title>
</head>
<h1> heading </h1>
<p> paragraph </p>
But it is not suggested to remove the main part of the html document.
Remove <body> and <html> tags will collapse the XML and will make hard for search engines to identify the document.If we delete the <body> tag, errors can be occurred in the internet explorer 9.
<head> element
The <head> element can also be deleted in the HTML5 document.
The browser adds all the elements before <body> tag element by the default to the <head> tag element. But it is not a better way to remove the html elements.
If the <head> tag is removed, the html document looks like below -
<!DOCTYPE html>
<html lang="en">
<head>
<title> head tag element </title>
</head>
<body>
<h1> heading </h1>
<p> paragraph </p>
</body>
</html>
Meta data
The character encoding or URL is most important along with the declaration of the language used.
It is very simple for the search engines and the browser to identify the html document when the character encoding or URL and the language declaration is completed as early as possible.
Consider the following code -
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<title> … </title>
</head>
<body>
……
</body>
</html>
Html Comments
HTML document comments are signified by the different character strings "<!- –" and "– ->".
The first string is the beginning of the html comment and the second string is used to suggest the end of the comment.
Any information is written in between two strings judged to be a comment.
The comments are not appeared by the browser they are text in the body of the html document.
String(!--) is used to begin the comment have not spaces between its characters, but this is optional condition for the ending comment.
Single line comments can be written as follows -
<!-- This is one line comment –->
If this statement is written in the HTML document as a comment, that comment gets disable by the browser.
Two or more-line comments can be written as follows -
<!-– This is the first line comment of multiline comment
–– This is the second line of multiline comment –- >
Style sheet
When we are coding html document, we can use modest and accurate syntax. When we are defining a <style> tag in the html document, we can define it single line if the definition is small.
If the definition is small -
body { font-family: calibri ; font-size: 0.8em; }
If the definition is long -
header, footer {
padding: 17px;
color: blue;
background-color: grey;
}
Rules -
- Use open brackets in the same line as the selector when the definition is long.
- use single space before the open brackets.
- Can place double spaces of indentation.
- Use semicolon including the last (for example padding:15px,etc.) after each property value pair.
- Use only spaces around the values if the value contains the space.
- Use closing brackets in a new line without spaces.
- Escape lines more than 80 characters.
Loading java script in html
There is a simple syntax, to load the java script as follows
<script src="index.js">
In the above syntax, it is not mandatory to use the type attribute. Src is the source attribute and ".js" is the expansion of java script.
Accessing html elements with java script
There are different ways to access the html elements with java script.
For example, getting elements by id and name.
Example -
<!DOCTYPE html>
<html>
<body>
<p id="INDEX" onclick="changeText()"> This is paragraph 1. </p>
<p id="index" onclick="changeText()"> This is paragraph 2. </p>
<script>
function changeText() {
document.getElementById("index").innerHTML = "subtitle 2 will be
overwritten";
}
</script>
</body>
</html >
Java script can produce various errors that are very hard to find when we use different html style sheets.
Output -
This is paragraph 1. This text wont change even we click on this. Because the font case is different than expexcted.
This is paragraph 2. Click on text to see how it changes.
Use lower case file names
When writing the html code or designing the web site, should always use the lower-case letters because some web browsers (apache, Unix ) allow the lower-case letters.
However, other web browsers (Microsoft, IIs) cannot allow the lower-case letters.
In other words, we can say that some of the web browsers are case insensitive and some of the browsers are case sensitive.
If we write the file name in uppercase, case sensitive browser will not understand and produce errors.
Lower case letters should be used always in the file name to escape these problems.
File extension
The file extension of the html file is .htm or we can also use .html extension.
The extension for the java script file is .js and the extension for the CSS is .css.
Difference between .htm and .html
Both files are html documents, and all considered as same by any web server or web browser. There is no difference between .htm and .html.
Unix operating system use .html and the early DOS system and the Ms software uses .htm file.
Technical difference
There are technical differences when the server is configured with the .html as default file name, then the file should be used as .html not the .htm file.
There are some servers may be configured with more than one default file extension and generally we can use as many as default names defined.
Html default file names are listed below -
- .html
- .htm