HTML has definitely come a long way from its beginnings in the 1990s. In fact, HTML markup techniques and rules move so fast that it can be challenging to keep in touch with times. Given below are some of the most recent HTML techniques that can be used for a better website design and keep up with the latest HTML5 markup.
Introducing the Figure Element
During the last few years, most web pages use the following type of markup whenever they wanted to add a caption or small write-up with an image:
<img src="path/image" alt="Description of image" /> <p>Write-up of image </p>
However, there is no way to actually link the caption with the image itself, and web designers had to rely on the page layout to make visitors imply the association between the image and caption. This has changed with HTML5, which now has an element called
<figure>. This element, along with the
<figcaption> element, allows you to clearly associate a caption with an image.
Here is an example of how to do it:
<figure> <img src="path/image" alt="Description of image" /> <figcaption> <p> Write-up of image </p> </figcaption> </figure>
Using the Hgroup for headers
When you have to add a subheading immediately below the name of the website, web designer use the
<h2> tag consecutively in their markup, which is effective in a way. However, there was not easy way in HTML4 to show the association between these two headings. Moreover, using the
<h2> tag repeatedly causes hierarchy issues too, and you may not get the results you wanted when you see the published page. The
<hgroup> tag helps solve this issue by grouping the same type of headings together and maintaining the flow of the document. Here is an example of how this tag can be used:
<header> <hgroup> <h1> First heading </h1> <h2> Subheading </h2> </hgroup> </header>
Using the new Doctype tag
The XHTML Doctype can be difficult to memorize and implement for web designers and developers, but HTML5 makes it a lot easier to use. Here is a quick comparison of an XHTML and HTML5 Doctype tag:
<!DOCTYPE html PUBLIC "-//ExampleSite//Example//EN" "http://www.examplesite.com/TR/xhtml1/Example.dtd">
This type of tag is much shorter, and for most browsers it is not even that necessary when using HTML5. However, older browsers generally need a specified Doctype tag, and using this tag renders the markup in standard mode.
Using the Small tag correctly
<small> element is generally used for creating subheadings positioned close to a page logo. It is a very useful element too, but HTML5 has redefined it as a small print, like a small copyright statement at the end of the web page. If you ever plan on adding fine print to your web page, the
<small> element is now the appropriate one to use for this information.