HTML5 Style Guide and Coding Conventions
HTML5 have many new style also HTML5 made web designer life very simple because of their new style features.HTML Coding Conventions
Mostly web designer or web developers uncertain about the coding style and their syntax to use in HTML. Many web designer or developer converted from HTML to XHTML. With XHTML we forced to write valid and well format code. But HTML5 is bit more sloppy when it comes to code validation.HTML5 Correct Document Type
You should always decalre the documents type in the first line of your web page. you can use doctype in lower case also.Example:-
Instead of <!DOCTYPE html> you can use <!doctype html>Use Lower Case Element Names in HTML5
HTML5 allows mixing your elements name in uppercase and lowercase letters.But mixing uppercase letter and lowercase letter is not good idea. Most developers use lowercase name in HTML5 and i also recomand in lowercase letter because lowercase letter look more cleaner and lowercase letter always easy to write.
Example:-
Writing HTML5 element in uppercase letter is not good idea.<SECTION>
<p>Your Paragraph start here.</p>
</SECTION>
Many web designer or developer mix their HTML5 element like follow example. That`s also look bad.
<Section>
<p>Your Paragraph start here.</p>
</SECTION>
The best way to write your HTML5 elements in lowercase letter like.
<section>
<p>This is a paragraph.</p>
</section>
Close All HTML Elements
Basically in HTML5 you dont need to close your all elements but i recommend you should always close your HTML elements. Thats the best way and you will never get error or warning.Example:-
<section><p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>
Use Lower Case Attribute Names
I always recommend you to should use lower case attributes name also as you used in HTML elements.Example:-
<div class="classname">In this example i write class attribute in lowercase. I have seen many developer use class attributes in uppercase letter like.
<div CLASS="classname">
Setting The Viewport
HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag. The viewport is the user's visible area of a web page. It varies with the device, and will be smaller on a mobile phone than on a computer screen. Keep following <meta> tag inside <head> section.<meta name="viewport" content="width=device-width, initial-scale=1.0">
No comments:
Post a Comment