HTML Optimization – The Better Way

Hello guys and welcome to this amazing space where we would talk about HTML Optimization..  You might be wondering what this is about or you might have heard this somewhere before and didn’t get the gist of it, well it is a series of best practices at making your HTML meet the developer community requirements. lets dive into it…

HTML OPTIMIZATION TECHNIQUES

like I had said, this is a series of techniques to help you get your HTML code up to standard..

HTML SEMANTIC TAGS

These are a set of predefined HTML tags built in to HTML5 associated with some constant parts of a webpage and using them is one of the techniques to making your code readable by machine and man alike. lets look at a coded example:

<!– writing a navbar –>
<section>
       <nav>
              <div class=”navbar”>
                      <div class=”navbar-left”>
                               <img src=”img/logo.png”  alt=”Company logo”/>
                       </div>

                        <div class=”navbar-right”>
                                 <a href=””>Home</a>
                                 <a href=””>About Us</a>
                                 <a href=””>Contact Us</a>
                        </div>
               </div>
        </nav>
</section>

As can be seen from the above code which writes a simple navigation bar, there are some semantic html tags used there which make this code more readable even without the comment at the top, we would know this code writes a navbar given the use of the <nav/> HTML tag.

Lets list some of these tags and their use…

<nav/> – Used to show a navbar
<section/> – Used to represent an area of a web page
<header/> – refers to the Header text of your webpage,  possibly its opening text.
<main/> – refers to the main content of your page
<detail/> – refers to the details on a text or more information on a topic
<footer/> – refers to the footer / end part of your webpage

these amongst others are used to structure a cleaner and more readable HTML code thus improving SEO for your website and also making it easier for other users such as the keyboard users.

PS: These tags are not self closing as they enclose text or other html elements.

WRITING CODE COMMENTS / PSEUDO CODES

Code commenting is a process of writing non code text to show the use of a particular block of code. This started as an approach used by Programmers called “Pseudo coding” and this involves writing a short yet detailed description of what an alogrithm or code should do.

In HTML, since we are dealing with structure instead of operations, we write code comments to show what a block of HTML code actually does and as evident from the above example, even before seeing the block of code, we know that we are expecting a block of code that creates a website navigation bar.

Using the above techniques with the existing HTML Standardization practices would optimize your website SEO and readability wise….