Our Blog

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

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 Africa for 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>

Our Process

Consistency is the key to accomplishments and consistency comes following a process. We have a simple and detail oriented process which is conceptualised for perfection.

Requirement Elicitation

We give immense importance to transparent communication and what exactly the clients need.

Streamlining Process

Once we know what are the requirements of our clients we design and develop the digital solution accordingly

Verification

We seek client’s approval on everything we do. We validate every milestone and verify the product once complete

Testing and Delivery

Once the client and the team are on the same page in terms of the quality of the product, we deliver it

REVENUE DRIVEN TRANSFORMATION

  • Social media optimisation
  • Social media marketing
  • Pay per click
  • Email MArketing

Contact Us

Our Projects

Our work speaks for us! We have accomplished projects for various industries using different frameworks and technologies. Here are some of our projects.

HEXIS QUADRANT

Hexis-Quadrant was formed to help commercial organizations thrive in an ever-evolving glob...

Read More
STAYAPT

StayApt makes fitness clubs easily accessible to people of different abilities and fitness...

Read More
NEW & USED TRAILER

New and used trailer is a one-stop destination for individuals, Manufacturers, and Dealers...

Read More

View Our Other Projects

Curious to read about our work? Follow the link!

Explore More!

Our Clients Say

We are client-centric. The efforts we make are in favour of our clients and this is the reason good words follow us. Have a look at what our clients have to share.

Our Clientele

We work for value association and our clients are our extended family. We nurture professional associations and we proudly represent ourselves as technology partners of our clients.