Most of the web pages you visit are presented to you through HTML, which is the standard markup language used worldwide. Along with technologies such as CSS and Javascript, HTML plays an important role in building a web site.
With the continual development of technology, HTML has had five versions in total. The fifth and last version of HTML is known as HTML5. Whether you are a beginner or expert in designing web sites with HTML or HTML 5, keep in mind to follow best practices to write clean and easily manageable code as well as speed up the development progress in the long run.
Here are some best practices for HTML5 to follow. Keep reading this nice article to the end for gaining more useful information.
This article also tackles the advantages and disadvantages of HTTPS and web page vs website, what is the difference between those two.
What is HTML5?
HTML5 is the fifth major standard of HTML. Development of the standard began in 2007 and HTML5 websites started becoming mainstream in 2010. The final HTML5 standard was officially standardized by W3C on October 28, 2014.
New Semantic HTML5 Tags (Elements)
Semantic HTML is HTML that humans can read and understand. Any human, not just coders, and developers, and if humans can read it more easily, of course, robots can, too. If robots can read the structure of your site more easily, then they can make a more informed decision about how well your site stands up to various search queries.
Basically, you’re telling the search engine crawlers “this is a blog post” or “this is a navigation menu”. Usually a web site contains HTML code like: <div id=”nav”> <div class=”header”> <div id=”footer”> to indicate navigation, header, and footer.
HTML5 offers new semantic HTML elements to define different parts of a web page:
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
26 Best practices for HTML5
The following instruction is everything you need to know for HTML5 (and also some CSS).
- Declare a doctype
- The <header> element
- The Meta tags
- The <title> tag
- The <nav> tag
- The <link> tag
- The <header>, <footer> elements
- The <p> tag
- The <section> Element
- The <script> tag
- Closing tags
- The “lang” attribute
- “Keep it simple” principle
- The <main> element
- <article>, <section>, or <div>?
- <section> is a semantic markup tag, not a stylistic one
- The <figure> element
- Grouping elements with <figure>: Use of <figcaption>
- Use CSS for your site’s styling
- The <br> element is not for layout
- Type attribute is not necessary for stylesheets and JavaScript scripts.
- Indentation consistency.
- lowercase, Title Case, CamelCase, or ALL CAPS?
- CamelCase is used in JavaScript and it is a visually identifiable JS formatting. For that, it is best to not use it for any snippet that is not in JS
- Title Case is only for text, strings, content. While it is not technically wrong to name your classes or IDs with mixed cased names, it does affect readability.
- ALL CAPS: again, nothing technically wrong with it, other than being conventionally considered “shouting”, or visually unpleasant
- Text formatting
- <b> – Bold text
- <strong> – Important text
- <i> – Italic text
- <em> – Emphasized text
- <mark> – Marked text
- <small> – Smaller text
- <del> – Deleted text
- <ins> – Inserted text
- <sub> – Subscript text
- <sup> – Superscript text
- Comments
- Minifying and combining CSS and JS files
The DOCTYPE declaration should be in the first line of your HTML. It is recommended that you use the HTML5 doctype:
<!DOCTYPE html>
which actually activates the standard mode in all browsers. Alternatively, you can use a doctype that corresponds to the HTML/XHTML version you are using.
The <h1> tag to <h6> tag are all HTML tags used to define HTML5 headings. <h1> defines the most important heading. <h6> defines the least important heading. Like your article title, make sure to use one <h1> instead of multiple H1 tags per page – this should represent the main heading/subject for the whole page.
Also, a header within your page should have the same styling as other sibling headers.
The <meta> tag defines metadata about an HTML document.
<meta> tags always go inside the <head> element and are typically used to specify a character set, page description, keywords, author of the document, and viewport settings.
Unlike text, metadata will not be displayed on the page but is machine parsable.
Metadata is used by browsers (how to display content or reload the page), search engines (keywords), and other web services.
Besides the obvious fact that the title of your document is not rendered on the browser tab, it is bad practice for accessibility.
The <title> tag is required in HTML documents!
The content of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.
The <nav> tag defines a set of navigation links, which help search engines to find links and another site.
Notice that NOT all links of a document should be inside the <nav> element. The <nav> element is intended only for a major block of navigation links.
The <link> tag defines the relationship between the current document and an external resource. The <link> tags are most often used to link to external style sheets.
In the above picture of a sample layout, we see a <header> on the top of the page and a <footer> on the bottom. This reflects the typical webpage we are used to seeing, with a logotype on the top of the page and the footer with some links and copyright notices on the bottom.
However, HTML5 gives more semantic meaning to the header, footer elements. A <header> tag can be used in any section or article to include headings, publish date, or other introductory content of the article or section. Similarly, the footer can include information about the author of each article, links to related content, etc.
The <p> tag defines a paragraph in an article.
Browsers automatically add a single blank line before and after each <p> element. For example <h1>
<p>some title</p>
<p>some text</p>
</h1>
Tip: Use CSS to make your paragraphs’ styling.
The <section> tag defines a section in a document.
According to W3C’s HTML5 documentation: “A section is a thematic grouping of content, typically with a heading.”
A Web site’s home page could be split into sections for introduction, content, and contact information.
The <script> tag is used to embed a client-side script (JavaScript). The <script> tag should be used always before body close or Bottom in HTML file.
Void elements (tags that cannot have any contents). Self-closing tags are valid, but not required. These elements include <br>, <hr>, <img>, <input>, <link>, <meta>,<area>, <base>, <col>, <command>, <embed>, <keygen>, <param>, <source>, <track>, <wbr>
Normal elements can never have self-closing tags.
One reason for sticking with the use of optional tags, such as the <html> tag, is the use of attributes. It is considered best practice for internationalization purposes, to always declare the default text language of a page in the <html> tag.
Generally, HTML5 was designed for backward compatibility with all older HTML versions and XHTML. For that reason, it is recommended to avoid using XML declarations or attributes.
The <main> element has been included in HTML5 to denote the main content of the document body, a content area that is directly related to the major topic of the document. The <main> element should be used once per page to indicate the main content area of that page.
So, there is no need anymore to use a div when we have a more specific tag for our main content.
We use the <article> tag for a content block that is stand-alone and makes sense without the need to give further context.
A <section> tag is used to divide either the page into different subject areas or to section an individual article. We could say that <section> is a more generic tag than <article> – it denotes content that is related, but not necessarily self-contained, while an article always has the stand-alone property.
Finally, we use <div> as a last resort, when there is no other appropriate markup tag.
It is important to emphasize that <section> is a semantic tag. In fact, it should have a heading tag, and even if it hasn’t, using a heading would make sense.
It should not be used to tag a wrapper, a container, or any other purely stylistic block.
A good approach can look like this:
<body id="wrapper">
<div class="container-fluid">
<main id="main">
</main>
</div>
</body>
The figure element is mostly used with pictures, however, it has a wider range of possible uses. Anything related to the document’s topic, but it could be positioned anywhere in the document, could be wrapped in a <figure> element.
Think of illustrations, tables, or diagrams in a book.
An interesting characteristic of <figure> is that it does not contribute to the document’s outline
So it can be used to group elements with a common theme, such as a number of images with one common <figcaption>, or even a block of code.
The <figcaption> caption should go either directly after the opening <figure> tag, or directly before the closing </figure> tag.
<figure> <img src="img1.jpg" alt="First image"> <img src="img2.jpg" alt="Second image"> <img src="img3.jpg" alt="Third image"> <img src="img4.jpg" alt="Fourth image"> <figcaption>Four images related to a topic </figcaption> </figure>
In general, as a best practice, it would be optimal to avoid stylistic elements in the markup; that’s what CSS is for. CSS3 has changed the styling of web pages. Instead of having styling code with every element of your web page, you can now have your styling defined in one location and applied to all the elements of your web page.
Do not use <br> to format your document or to add space between elements.
A rule of thumb here would be that, if it can be formatted by defining margin or padding in CSS, then you should not use <br>. If, however, you want to add line breaks within the same element, then <br> is appropriate:
<label>Please use the following text area:<br> <text area name="loremipsum"></textarea> </label>
In HTML5, there is no need to define the type for <style> and <script> elements. All modern browsers expect that stylesheets will be CSS and scripts will be JavaScript. It is still a very common practice since many popular CMS add these attributes automatically, but there’s no reason to do it in manually written code
Consider this:
<link rel="stylesheet" href="style.css" /> <script src="script.js"></script>
Instead of this:
<link type="text/css" rel="stylesheet" href="css/styles.css" /> <script type="text/javascript" src="js/scripts.js"></script>
Everything mentioned in this category falls into the field of subjective. Each front-end developer ends up with their personal style, and this is fine as long as the style is consistent and makes sense. Generally, if your code is clear and readable by another developer, then this is good enough.
However, we include some general recommendations that seem to be widely accepted:
A code with either complete lack of indentation, or inconsistent indentation lacks in readability. For reference, Google Style Guide for HTML recommends using two spaces for indentation and not use tabs
If this was the widely accepted standard, then everyone would format their HTML code consistently. However, every developer is more likely to do things their way, so at least we should all try and keep it consistent: if you decided to use 4 spaces, or two tabs for indentation (please don’t use two tabs), enforce it to every single line of HTML code you write.
HTML5 contains several elements for defining text with a special meaning. Formatting elements were designed to display special types of text:
Comments might affect code readability in a positive manner when used correctly. I have the habit of commenting on closing tags (especially <div> closing tags) noting the class name of the opening tag – this makes it easy to know which block has been closed in nested tags.
Example:
<div class="myclass"> <div class="nextclass"> ... </div><!-- .nextclass" --> </div><!-- .myclass -->
A modern site will usually have more than one CSS file. The main stylesheet, a bootstrap or other grid stylesheet, maybe a few plugins or themes stylesheets, etc. Each CSS file makes a separate HTTP request, slowing down the load time of your site.
It is a recommended practice, in the final product, to minify and combine all your CSS files for improved load times. It is also usual to keep the unminified file, possibly in a “CSS/SRC” folder, because editing/debugging minified files is difficult.
Final words
I hope you like our practices for HTML5 and front end web development best practices. These tips are meant for all people who wish to freshen up on HTML best practices. I tried to list here many things that, although simple, make a huge difference in code readability. Hopefully, everyone who reads this article will be able to learn something new. If you find any errors or mistakes then do let us know. Thanks for reading.
FAQS
Why is it important to read my website source code?
Underneath all the beautiful images, perfect typography, and wonderfully placed calls to action lies your webpage source code. This is the code your browser turns into delightful experiences for your visitors and customers on a daily basis.
Google and other search engines “read” this code to determine where your webpages should appear in their indexes for a given search query. So, a lot of SEO comes down to what’s in your source code.
This is a quick guide to show you how to read your own website source code in order to make sure it’s properly SEO-ed and, really, to teach you how to sanity-check your SEO efforts. I also will go over a few other situations where knowing how to view and examine the right parts of source code can help with other marketing efforts.
How can I reduce the loading time for my site?
To improve your website’s load time, you can minimize HTTP requests in the following ways:
- Combine Files – Using external style sheets and scripts is important to keep them from bogging down your page load times but don’t have more than one CSS and one script file.
- Use CSS Sprites – When you combine most or all of your images into a sprite, you turn multiple image requests into just one. Then you just use the background-image CSS property to display the section of the image you need.
- Image Maps – Image maps are not as popular as they once were, but when you have contiguous images they can reduce multiple HTTP image requests down to just one.
HTTPS: Advantages and Disadvantages
Here is the list of advantages and disadvantages of HTTPS:
Advantage
- Encrypted Data
- A website with HTTPS is highly recognizable by Google.
- Website is more authoritative
- SSL Certificate for users’ protection
Disadvantages
- SSL Certificate annual fees
- Websites’ speed is decreasing causing delays.
- Some firewalls and proxy systems deny access to HTTPS sites.
Webpage and Website differences
You are probably thinking about the difference of webpage and website. Webpages are part of the websites that comprise links to other webpages while websites are clusters of webpages related to each other addressed to URL. Webpages require less time span to develop, unlike websites. Websites take more time to develop it could be done for months or years.
Bottom Line
HTML and HTML5 got no great difference, HTML5 just added new codes and features that allow developers to create websites easily and precisely. Websites with HTTPS have a higher chance of appearing first depending on their ranks. We also recommend using HTTPS to ensure the security of websites.
Make sure that you have read and understood Cookie Policy, Privacy Policy, and our Terms of Service.
