10 Cool Things HTML Tags Can Do

At the moment there are a total of 142 HTML elements standardized by W3C excluding the ones in the initial phases of standardization and those that went obsolete. That said, it is possible to miss or forget few of them that can be useful when needed.

Earlier we did a recap of some of the best CSS tricks you might have overlooked. This post will remind you some of the HTML tags that you didn’t know you could use to implement features such as:

1. Map Images

The HTML <map> elements can be used to create image maps. Image maps are basically images with clickable areas on them, that can be hyperlinked to another web page or other parts of the same document. You can define which areas of an image are clickable by simply mentioning the corresponding X Y coordinates of those points in the <area> elements nested inside <map>.

Note: The clickable areas cannot be styled through CSS so, if you want those markers to be styled, use a simple image editing software to draw the markers.

Tip: If you want to know the coordinates for a point in an image, open the image in an image editing software and move the cursor to that point, you should be able to see the coordinates of it in the software itself. For GIMP it is shown at left side of the bottom bar.

2. Input suggestions

Use <datalist> to provide a list of relevant suggestions that appear while typing an input value.

3. Highlight Text

Highlighted text usually has dark text color with a light background. You can achieve that highlighted text effect with markup alone. Any text enclosed inside the <mark> will have that effect.

You can customize the highlight color with the background-color CSS property of <mark> and the text color with the color property.

4. Define Templates

Along with HTML5 came the new <template> element. The <template> element holds markup inside it that is not rendered by the browsers, the markup enclosed by it are to be used to generate dynamic contents in the page using JavaScript.

For example, suppose you have a <table> where rows are to be added dynamically, you can simply put the markup of an empty row of that table inside the <template> tag and when needed call a JavaScript function containing script to copy the markup from inside the template tags and add it to the table markup. This is not supported by IE.

5. Fine Print

Fine print refers to the text of document that is typically printed in very small size containing information like conditions, terms, restrictions, citations, legal rights etc. The <small> tag in HTML can be used to show fine prints. From HTML5 onwards the <small> tag not only shows a fine-print styled text but will also semantically define the same as legal disclaimers and caveats.

6. Assign a Base URL

The <base>HTML element is quite handy when you have multiple links in your document with the same domain URLs, it allows you to add a base URL to the document which in turn allows you to add only relative URLs to other links in the page as needed.

Note: All of the relative URLs in the page will be referred based on the base URL, if you have any link with a different domain don’t forget to assign the complete URL to it.

7. Responsive Images

Responsive web development is in vogue with ever growing mobile access. Images can be toggled for different screen sizes with markup. The <picture> HTML5 element lets you add various image sources for different media for the image inside it.

Note: This currently works in Chrome only. You will have to set dom.image.picture.enable to true in about:config in Firefox.

8. Color Picker

HTML5 introduced many new input type elements; the color input element is one of them. It lets you chose a color on a webpage with the help of a color picker.

9. Group options

If you have many options in a dropdown list and would like to show them grouped, the <optgroup> element will get the job done. You can also style the groups with CSS.

10. The <noscript> element

The markup inside <noscript> is rendered by the browser only when the script is disabled. This tag is useful for letting users know when the script is disabled in their browser and to provide any alternate fallback mechanism for components on the web pages that will stop working without JavaScript.

 <head> <noscript><link rel="stylesheet" href="noscript_fallback.css"></noscript> </head> <body> <noscript><h2>Javascript is disabled in your browser.</h2></noscript> </body> 

Now Read:
15 Useful CSS Tricks You Might Have Overlooked

10 Cool Things HTML Tags Can Do

10 Cool Things HTML Tags Can Do

At the moment there are a total of 142 HTML elements standardized by W3C excluding the ones in the initial phases of standardization and those that went obsolete. That said, it is possible to miss or forget few of them that can be useful when needed.

Earlier we did a recap of some of the best CSS tricks you might have overlooked. This post will remind you some of the HTML tags that you didn’t know you could use to implement features such as:

1. Map Images

The HTML <map> elements can be used to create image maps. Image maps are basically images with clickable areas on them, that can be hyperlinked to another web page or other parts of the same document. You can define which areas of an image are clickable by simply mentioning the corresponding X Y coordinates of those points in the <area> elements nested inside <map>.

Note: The clickable areas cannot be styled through CSS so, if you want those markers to be styled, use a simple image editing software to draw the markers.

Tip: If you want to know the coordinates for a point in an image, open the image in an image editing software and move the cursor to that point, you should be able to see the coordinates of it in the software itself. For GIMP it is shown at left side of the bottom bar.

2. Input suggestions

Use <datalist> to provide a list of relevant suggestions that appear while typing an input value.

3. Highlight Text

Highlighted text usually has dark text color with a light background. You can achieve that highlighted text effect with markup alone. Any text enclosed inside the <mark> will have that effect.

You can customize the highlight color with the background-color CSS property of <mark> and the text color with the color property.

4. Define Templates

Along with HTML5 came the new <template> element. The <template> element holds markup inside it that is not rendered by the browsers, the markup enclosed by it are to be used to generate dynamic contents in the page using JavaScript.

For example, suppose you have a <table> where rows are to be added dynamically, you can simply put the markup of an empty row of that table inside the <template> tag and when needed call a JavaScript function containing script to copy the markup from inside the template tags and add it to the table markup. This is not supported by IE.

5. Fine Print

Fine print refers to the text of document that is typically printed in very small size containing information like conditions, terms, restrictions, citations, legal rights etc. The <small> tag in HTML can be used to show fine prints. From HTML5 onwards the <small> tag not only shows a fine-print styled text but will also semantically define the same as legal disclaimers and caveats.

6. Assign a Base URL

The <base>HTML element is quite handy when you have multiple links in your document with the same domain URLs, it allows you to add a base URL to the document which in turn allows you to add only relative URLs to other links in the page as needed.

Note: All of the relative URLs in the page will be referred based on the base URL, if you have any link with a different domain don’t forget to assign the complete URL to it.

7. Responsive Images

Responsive web development is in vogue with ever growing mobile access. Images can be toggled for different screen sizes with markup. The <picture> HTML5 element lets you add various image sources for different media for the image inside it.

Note: This currently works in Chrome only. You will have to set dom.image.picture.enable to true in about:config in Firefox.

8. Color Picker

HTML5 introduced many new input type elements; the color input element is one of them. It lets you chose a color on a webpage with the help of a color picker.

9. Group options

If you have many options in a dropdown list and would like to show them grouped, the <optgroup> element will get the job done. You can also style the groups with CSS.

10. The <noscript> element

The markup inside <noscript> is rendered by the browser only when the script is disabled. This tag is useful for letting users know when the script is disabled in their browser and to provide any alternate fallback mechanism for components on the web pages that will stop working without JavaScript.

<head>
<noscript><link rel="stylesheet" href="noscript_fallback.css"></noscript>
</head>
<body>
 <noscript><h2>Javascript is disabled in your browser.</h2></noscript>
</body>

Now Read:
15 Useful CSS Tricks You Might Have Overlooked

10 Cool Things HTML Tags Can Do

Control How Google Indexes Your Content with Meta Tags

There are many search engines out there but most of the time, site owners care about getting their site indexed on the almighty Google. One way to perform better on the search engine is to use meta robot tags.

The meta robot tag is a consensus meta tag among search engines like Google, Yahoo, and Bing. The use of the meta tag is to let web developers have accessibility control for web pages, against search engine crawlers. For instance, something like noindex will prevent all robots from the search engines from putting your web page in their index.

Google’s own robot is called Googlebot. In this post we will see how we address Googlebot exclusively through meta tags.

Recommended Reading: 5 Things You Can Do With HTML Meta Tag

Addressing Googlebot

To address Googlebot, specify the meta name as googlebot instead of just robots. This example will prevent Googlebot from putting your web page in their index but still allow bots from Bing and Yahoo to crawl the page. Thus your web pages may still appear in Bing and Yahoo search results.

<meta name="googlebot" content="noindex">

Google has a number of special robots that crawl through different kinds of content such as Image, News, Video, Ads and Mobile. Google allows you to block these robots individually. If you do not want your website to appear in Google Mobile search results, for example, you can specify the meta robot tag this way:

<meta name="googlebot-mobile" content="noindex">

The full list of Google bot types can be found in the Google’s Website Crawlers page.

Prevent Image Indexing

It’s a real irritating when you find your copyrighted image used by someone else without your prior permission. If you want to minimize this from happening, you can prevent Google from putting your images on their index.

Specify the meta robot tag with the value of noimageindex. This will prevent the robot from indexing all the images in the page and your images will not appear in Google Image Search results, which is where people usually search for images.

<meta name="googlebot" content="noimageindex">

Alternatively, you can set the meta name as googlebot-image to specifically prevent Google’s robots from crawling your site for images.

<meta name="googlebot-image" content="noimageindex">

Prevent Translating

Google Chrome offers the translation of a site in foreign language to the visitor’s favorite or local language, with the help of Google Translate. While Google Translate translation is getting better, it’s far from perfect for some languages. The translation output could sometimes be really quirky.

If you don’t want Google to translate your web pages, set the googlebot meta with the value of notranslate, like so.

<meta name="googlebot" content="notranslate">

If you want to prevent a certain section of the page from being translated, you can add the notranslate class within the element wrapping the content:

<div class="notranslate">
<!-- the content -->
</div>

Google will ignore this <div> completely.

Prevent Indexing After A Specified Time

You can also prevent Google from indexing your web pages after certain period of time. This will be particularly useful for web pages which are only relevant within a timeframe, such as an event registration page, for example.

In this case, you probably want to tell the robot to not crawl and index this page after the event has ended, thereby preventing it from showing up in Google’s search results.

To do this, specify the meta tag with the value of unavailable_after then followed by the time info. The time format should comply with the RFC-850 format, for example: Thursday, 26-Sep-14 10:00:00 UTC

<meta name="googlebot" content="unavailable_after: Monday, 29-Sep-14 10:00:00 UTC">

Giving the above example, Google robot will not crawl the page after 29-Sep-14. The page will eventually disappear from the index, yet you can still retain the page for archiving in your website.

No related posts.

Control How Google Indexes Your Content with Meta Tags

Control How Google Indexes Your Content with Meta Tags

There are many search engines out there but most of the time, site owners care about getting their site indexed on the almighty Google. One way to perform better on the search engine is to use meta robot tags.

The meta robot tag is a consensus meta tag among search engines like Google, Yahoo, and Bing. The use of the meta tag is to let web developers have accessibility control for web pages, against search engine crawlers. For instance, something like noindex will prevent all robots from the search engines from putting your web page in their index.

Google’s own robot is called Googlebot. In this post we will see how we address Googlebot exclusively through meta tags.

Recommended Reading: 5 Things You Can Do With HTML Meta Tag

Addressing Googlebot

To address Googlebot, specify the meta name as googlebot instead of just robots. This example will prevent Googlebot from putting your web page in their index but still allow bots from Bing and Yahoo to crawl the page. Thus your web pages may still appear in Bing and Yahoo search results.

 <meta name="googlebot" content="noindex"> 

Google has a number of special robots that crawl through different kinds of content such as Image, News, Video, Ads and Mobile. Google allows you to block these robots individually. If you do not want your website to appear in Google Mobile search results, for example, you can specify the meta robot tag this way:

 <meta name="googlebot-mobile" content="noindex"> 

The full list of Google bot types can be found in the Google’s Website Crawlers page.

Prevent Image Indexing

It’s a real irritating when you find your copyrighted image used by someone else without your prior permission. If you want to minimize this from happening, you can prevent Google from putting your images on their index.

Specify the meta robot tag with the value of noimageindex. This will prevent the robot from indexing all the images in the page and your images will not appear in Google Image Search results, which is where people usually search for images.

 <meta name="googlebot" content="noimageindex"> 

Alternatively, you can set the meta name as googlebot-image to specifically prevent Google’s robots from crawling your site for images.

 <meta name="googlebot-image" content="noimageindex"> 

Prevent Translating

Google Chrome offers the translation of a site in foreign language to the visitor’s favorite or local language, with the help of Google Translate. While Google Translate translation is getting better, it’s far from perfect for some languages. The translation output could sometimes be really quirky.

If you don’t want Google to translate your web pages, set the googlebot meta with the value of notranslate, like so.

 <meta name="googlebot" content="notranslate"> 

If you want to prevent a certain section of the page from being translated, you can add the notranslate class within the element wrapping the content:

 <div class="notranslate"> <!-- the content --> </div> 

Google will ignore this <div> completely.

Prevent Indexing After A Specified Time

You can also prevent Google from indexing your web pages after certain period of time. This will be particularly useful for web pages which are only relevant within a timeframe, such as an event registration page, for example.

In this case, you probably want to tell the robot to not crawl and index this page after the event has ended, thereby preventing it from showing up in Google’s search results.

To do this, specify the meta tag with the value of unavailable_after then followed by the time info. The time format should comply with the RFC-850 format, for example: Thursday, 26-Sep-14 10:00:00 UTC

 <meta name="googlebot" content="unavailable_after: Monday, 29-Sep-14 10:00:00 UTC"> 

Giving the above example, Google robot will not crawl the page after 29-Sep-14. The page will eventually disappear from the index, yet you can still retain the page for archiving in your website.

No related posts.

Control How Google Indexes Your Content with Meta Tags