7 Must Know HTML5 Tags for Every Web Designer

By May 28, 2019 Business, Web Design

Three years back when the latest version of Hypertext Markup Language, HTML5 came out developers around the world breathed a sigh of relief. Given its importance in web development, the tags and elements in its previous version had started to lose sheen given the evolution of web development. Nonetheless HTML5 came out with new and interesting elements and tags that have since then reinvented web development. Here we take a look at seven HTML5 tags that every developer should be aware of –


One of the most important tags, <main> is used to define the main content in a document. All content under the main tag should be unique and there should be no repetition of content. One needs to bear in mind that there cannot be more than one <main> element in a single document.


<h1>Web Browsers</h1>
<p> Google Brazil, Russian, India, China, and South Africa for the BRICS Association.</p>

<p>Brazil is one of the fastest growing economies in the world……</p>

<p>The successor to the erstwhile Soviet Union it one of the largest military powers in the world.</p>

<p>The largest democracy in the world it is….</p>

<p>It is the second largest economy in the world and the hub of global manufacturing.</p>

<h1>South Africa</h1>
<p>The African Tiger, it is the fastest growing economy in the African continent.</p>


The<figure> tag is one of the new additions of HTML5 and this has come as a great aid to developers who earlier had to use <img> to include illustrations, photos, diagrams, and code listings etc. Unlike the <img> tag the <figure> tag is independent of the document flow and even if removed doesn’t affect the flow of the document.


<img src=”img_china.jpg” alt=”The Great Wall of China” width=”300″ height=”200″>


The <mark> was added in HML5 and is used for highlighting parts of the text in the document. This is mainly used to highlight certain sections of the text for reference purpose such as in the case of quotations or reference to other sections in the body. This tag can be used along with other global properties of HTML5.


<p>Albert Einstein said <mark>“Imagination is more important than knowledge”.</mark> .</p>


The <keygen> tag is meant to specify a key-pair generator field that can be used for forms. This was introduced with HTML5 and generates a private key which is stored locally and one public key sent to the server when a form is submitted.


<form action=”/action_page.php” method=”get”>
Username: <input type=”text” name=”usr_name”>
Encryption: <keygen name=”security”>
<input type=”submit”>


A newly introduced tag in HTML5 <section> is used to define new sections in a document. For instance new chapter, header or footer can be defined to distinguish it from other sections in the document. This tag makes it easy to publish large documents in HTML5.


<p>People for the Ethical Treatment of Animals (PETA) is the largest animal rights….</p>


It is considered one of the biggest additions in the new version of HTML. The <canvas> tag lets designers draw graphics seamlessly using a scripting language (JavaScript in most cases). It acts as a container for graphics and the designer has to use scripts to actually create illustrations.


<canvas id=”NewCanvas”></canvas>
var canvas = document.getElementById(“NewCanvas”);
var ctx = canvas.getContext(“2d”);
ctx.fillStyle = “#FF0100”;
ctx.fillRect(0, 0, 80, 80);

Leave a Reply