HTML5 Best Practices-Naming Style Convention

admin — Thu, 03 Dec 2020 18:22:00 +0000

HTML5 Best Practices -Naming and Style Convention

Today, we shall see a high-level HTML5 Best Practices-Naming Style Convention to be used for any web application.

We will cover the below guidelines for HTML5 usage,

Use HTML document Type declaration
Define only one per page
Define HTML Element</a></li><li><a href="#aioseo-define-body-html-element">Define <body> HTML Element</a></li><li><a href="#aioseo-viewport--responsive-web-design">Viewport -Responsive Web Design</a></li><li><a href="#aioseo-descriptive-meta-tags">Descriptive Meta Tags</a></li><li><a href="#aioseo-html-elements-as-lower-case">HTML Elements as Lower case</a></li><li><a href="#aioseo-html-elements---close-html-elements">HTML Elements – Close HTML elements</a></li><li><a href="#aioseo-html-empty-elements---close-empty-html-elements">HTML Empty Elements – Close Empty HTML elements</a></li><li><a href="#aioseo-html-attribute-as-lower-case">HTML Attribute as Lower case</a></li><li><a href="#aioseo-html-attribute-values-should-be-quoted">HTML Attribute Values should be Quoted</a></li><li><a href="#aioseo-use-text-as-alternatives">Use Text as Alternatives</a></li><li><a href="#aioseo-use-only-one-h1-per-page-or-post">Use only one H1 per Page or Post</a></li><li><a href="#aioseo-structure-your-html">Structure your HTML</a></li><li><a href="#aioseo-design-html-for-fallback-mechanism">Design HTML for Fallback mechanism</a></li><li><a href="#aioseo-design-your-html-stateless">Design your HTML Stateless</a></li></ul></div> Responsive Web UI Design is the key to delivering the best UX User Interface experience to users. HTML defines Web content and CSS usage puts the design of Web content. You must try to follow the best practices of HTML5 Naming and Style Convention for delivering the best experience to UI users. The below guidelines are meant to be more for fresh learners. <h2 class="wp-block-heading" id="aioseo-use-html-document-type-declaration">Use HTML document Type declaration</h2> All HTML5 document must use declaration <!DOCTYPE html> <pre class="wp-block-preformatted has-medium-font-size"><!DOCTYPE html></pre> Browsers behave more predictably and consistently when it parses HTML documents using Doctype declaration. The doctype is an important component of a quality HTML document. One can also use a lower version of HTML if needed to be supported. <pre class="wp-block-preformatted has-medium-font-size">> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> </pre> <h2 class="wp-block-heading" id="aioseo-define-only-one-html-per-page">Define only one <html> per page</h2> Define only one <html> per webpage as a good practice. This property is very useful for SEO(search engine) and can be used to specify the language of a web page helping read the page in different languages. <div class="wp-block-syntaxhighlighter-code "><pre class="brush: csharp; title: ; notranslate"> <!DOCTYPE html> <html> <head>  </head> <body>  </body> </html> </pre></div> <h2 class="wp-block-heading" id="aioseo-define-titlehtml-element">Define <title>HTML Element</h2> Its recommended to use < title> element in the webpage. There are multiple benefits of using the < title> element as listed below, <ul class="wp-block-list"><li>Displays the Title for the page in the search result (using google or bing or another search engine).</li></ul> <ul class="wp-block-list"><li>The browser tab shows the name of the page as defined in the Title.</li></ul> <ul class="wp-block-list"><li>When the user adds your webpage to Favorites, it shows the Title as the default name in the browser toolbar </li></ul> The contents of a page title are very important for search engine optimization (SEO) <pre class="wp-block-preformatted has-medium-font-size"><title>TheCodeBuzz - Best Practices for Software Development

Define HTML Element

Its recommended to use < body> element in the webpage,
```
 
 
 

 
 
 
```
Viewport -Responsive Web Design

The browser’s viewport is the area of the screen in which web content can be seen by the User. The width property controls the size of the viewport.

It’s recommended to use this meta tag for responsive web design.
Device(Mobile or Tab or Desktop) screen width will be set as the default width for the Web Page automatically.

Descriptive Meta Tags

One can also add meta tags for more descriptions like page descriptions, keywords, author of the document, etc.

HTML Elements as Lower case
- It’s recommended to use lower case for HTML elements names.
- However, HTML5 and lower versions do support the upper casing for the HTML elements.
- Lower case elements are easily readable and avoid any confusion.
```
Hi There, TheCodeBuzz community
```
HTML Elements – Close HTML elements

It’s recommended to close the HTML element’s Tag although HTML allows using HTML elements without closing.
```
Hi There, TheCodeBuzz community
```
```
Visit TheCodeBuzz
```
HTML Empty Elements – Close Empty HTML elements

It’s recommended to close Empty HTML elements.
HTML Attribute as Lower case
- It’s recommended using lower case for HTML Attribute names.
- However, HTML5 and lower versions do support the upper casing for the HTML Attribute.
- Lower case elements are easily readable and avoid any confusion
```
Visit TheCodeBuzz
```
HTML Attribute Values should be Quoted

It is recommended to use HTML Attribute Values within the Quote
```
Visit TheCodeBuzz
```
Use Text as Alternatives

It’s always recommended to provide text alternatives for any non-text content ex, images, videos, etc.

Example– alt tag for the images.

Description – The alt tag specifies an alternate text for the image in case if images can not be displayed for any reason. Search engines recommend using alt tags for images and can rank your page lower as a result.

Such text description also helps convert the few data to text so that it can be available for processing like screen reader could help read text for non-readable images etc.

Use only one H1 per Page or Post

It is recommended to use only one H1 per Page or Post as per W3C specification.

H1 Tags describe the Header of your page or post and it is used extensively by a search engine. Put the most important content in your H1 Tag.

Structure your HTML

Use new HTML5 semantics like Header, Articles, Section, or Footer for more readability.
```
 
 ...
 ...

 
 
 ...
 ...
 
 ...
 ...
 
 ...
 
 
 ...
 ...
 
 
```
Design HTML for Fallback mechanism

Always design for fallback. Static resources sometimes could be available like Images or Videos or Audio due to many other issues.

Design your HTML Stateless

HTML defines the content and CSS defines the Design of your webpage. Javascript lets you define Interactivity and most important for dynamic web design.

Your web pages should be self-content using the above bare minimum technology. Define your objects without relying on state or embedded scripts or state value or cookies etc.

References:
- Javascript Development – Best Practices
Do you have any comments or ideas or any better suggestions to share?

Please sound off your comments below.

Happy Coding !!

Please bookmark this page and share it with your friends. Please Subscribe to the blog to receive notifications on freshly published (2025) best practices and guidelines for software design and development.

The post HTML5 Best Practices-Naming Style Convention first appeared on TheCodeBuzz.

HTML - TheCodeBuzz

HTML5 Best Practices-Naming Style Convention

HTML5 Best Practices -Naming and Style Convention

Define HTML Element

Viewport -Responsive Web Design

Descriptive Meta Tags

HTML Elements as Lower case

HTML Elements – Close HTML elements

HTML Empty Elements – Close Empty HTML elements

HTML Attribute as Lower case

HTML Attribute Values should be Quoted

Use Text as Alternatives

Use only one H1 per Page or Post

Structure your HTML

Design HTML for Fallback mechanism

Design your HTML Stateless