Skip to main content

7 Must Know HTML5 Tags for Every Web Designer

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 loose 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 about –

Main

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.

Example

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

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

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

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

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

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

Figure

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.

Example

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

Mark

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.

Example

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

KeyGen

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.

Example

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

Section

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.

Example

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

Canvas

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.

Example

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

TechXimum Solutions

Techximum is an Australia based company, which offers Web Design, Web Development and SEO Services in Melbourne. If you are looking for custom software and web solutions, then nothing is better then to choose TechXimum Solutions.