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 - 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
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.
Use HTML document Type declaration
All HTML5 document must use declaration <!DOCTYPE html>
<!DOCTYPE html>
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.
<!-- HTML 4* version supported -->> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
Define only one <html> per page
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.
<!DOCTYPE html>
<html>
<head>
<!-- your link to stylesheet, jquery etc -->
</head>
<body>
<!-- your content -->
</body>
</html>
Define <title>HTML Element
Its recommended to use < title> element in the webpage.
There are multiple benefits of using the < title> element as listed below,
- Displays the Title for the page in the search result (using google or bing or another search engine).
- The browser tab shows the name of the page as defined in the Title.
- When the user adds your webpage to Favorites, it shows the Title as the default name in the browser toolbar
The contents of a page title are very important for search engine optimization (SEO)
<title>TheCodeBuzz - Best Practices for Software Development</title>
Define <body> HTML Element
Its recommended to use < body> element in the webpage,
<!DOCTYPE html>
<html>
<head>
<!-- your link to stylesheet, jquery etc -->
</head>
<body>
<!-- your content -->
</body>
</html>
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.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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.
<body> <p>Hi There, TheCodeBuzz community</p> </body>
HTML Elements – Close HTML elements
It’s recommended to close the HTML element’s Tag although HTML allows using HTML elements without closing.
<p>Hi There, TheCodeBuzz community</p>
<a href="https://www.thecodebuzz.com">Visit TheCodeBuzz</a>
HTML Empty Elements – Close Empty HTML elements
It’s recommended to close Empty HTML elements.
<br/>
<wbr/>
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
<a href="https://www.thecodebuzz.com">Visit TheCodeBuzz</a>
HTML Attribute Values should be Quoted
It is recommended to use HTML Attribute Values within the Quote
<a href="https://www.thecodebuzz.com">Visit TheCodeBuzz</a>
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.
<body>
<header>
...
...
</header>
<article>
...
...
<section>
...
...
</section>
...
</article>
<footer>
...
...
</footer>
</body>
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:
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(2024) best practices and guidelines for software design and development.