Tech Honey

The #1 Website for Oracle PL/SQL, OA Framework and HTML

HTML Datalist Tag

by

HTML Datalist TagHTML Datalist Tag <datalist> is used to define a list of pre defined values for HTML input tag <input>.

By using the Datalist Tag user will be able to see a list of values as they enter data in the textbox.

HTML Datalist Tag <datalist> is a closed tag and needs to be closed using HTML Datalist closing Tag </datalist>.

Note: Datalist tag is new in HTML 5.

Syntax of HTML Datalist Tag

<datalist>
<option value =”Value 1”>
<option value =”Value 2”>
.
.
.
<option value =”Value N”>
</datalist>

Example of HTML Datalist Tag

HTML Datalist Tag Output 
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Windows 7">
<option value="Windows 8">
<option value="Red Hat">
<option value="Ubuntu">
<option value="Mac OS X">
</datalist>

 

As we can see in the output of HTML Datalist Tag we can see that there is a list of value which is rendered containing the values of various operating systems.

HTML Datalist Tag supports all HTML Global Attributes and HTML Event Attributes.

HTML Datalist Tag Supporting Browsers

S. No. Browser Supported(Yes/No)
1 Internet Explorer Yes (above IE 9)
2 Firefox Yes
3 Google Chrome Yes
4 Opera Yes
5 Safari No

HTML Title Tag

by

HTML Title TagHTML Title Tag <title> is used to define the title of the HTML webpage or resource.

The Title Tag <title> is a mandatory tag and is required in all HTML resources or WebPages.

 

The Title HTML Tag is used to:

  1. Define the title of an HTML webpage or resource in the toolbar.
  2. Once the HTML resource or webpage is bookmarked the title is provided for the resource.
  3. The title of an HTML page is used while displaying results on a search engine and hence the HTML title tag is used in Search Engine Optimization.

Title Tag <title> is a closed tag and needs to be closed using closing Title tag </title>

Syntax of HTML Title Tag

<title>
Title of the page goes here..
</title>

Example of HTML Title Tag

HTML Title Tag Code Output 
<title> HTML Title Tag Page </title>
<p> This webpage deals with HTML Title Tag </p>
HTML Title Tag Page.

This webpage deals with HTML Title Tag

In the above Title HTML Tag example we have given the title of the webpage as “HTML Title Tag Page” and this will be rendered at the browser’s tab or window (not for this page) and also will be shown in the search results in various search engines.

HTML 5 Title Tag supports all HTML Global Attributes and HTML Event Attributes.

HTML Title Tag Supporting Browsers

S. No. Browser Supported(Yes/No)
1 Internet Explorer Yes
2 Firefox Yes
3 Google Chrome Yes
4 Opera Yes
5 Safari Yes

Important points about HTML Title Tag:

  1. There can be only one title tag in any HTML webpage or resource.
  2. If there is no title tag in HTML webpage or resource then that HTML resource will not be a valid HTML resource.

HTML Summary Tag

by

HTML Summary TagHTML Summary Tag <summary> is used to define heading for the HTML Details Tag <details>.

The heading can be clicked to view complete details and can be again clicked to hide the details.

HTML Summary Tag <summary> is a closed tag and needs a closing Summary HTML tag </summary>.

Note: Summary HTML tag is new in HTML 5.

Also, the HTML Summary Tag should be the first tag within the HTML details tag <details>.

Syntax of HTML Summary Tag

<summary>
Some summery goes here…
</summary>

Example of HTML Summary Tag

HTML Summary Tag Code Output 
</pre>
<details> <summary>Copyright www.techhoney.com.</summary>
 - All the data on this website
can be copyright protected by www.techhoney.com

You are free to use the information from this website
but we cannot be held responsible
if you ever suffer loss due to data usage.
</details>
<pre>
Copyright www.techhoney.com.

– All the data on this website can be copyright protected by www.techhoney.com

You are free to use the information from this website but we cannot be held responsible if you ever suffer loss due to data usage.

In the above example of the HTML Summary tag we can see that in the output section we have an arrow sort of icon which can be clicked to view the complete details about the disclaimer of the website. We can click the arrow icon to show/hide the details.

Also, note that the HTML Summary tag is the first tag within the HTML Details Tag.

HTML Summary Tag supports all HTML Global Attributes and HTML Event Attributes.

HTML Summary Tag Supporting Browsers

S. No. Browser Supported(Yes/No)
1 Internet Explorer No
2 Firefox No
3 Google Chrome Yes
4 Opera No
5 Safari 6 Yes

HTML DD Tag

by

HTML DD Tag <dd> is used to characterize an item in definition list.

HTML DD Tag is used with the HTML DL Tag <dl> (defines the list of definitions) and with HTML DT Tag <dt> (defines the items in the list of definition).

Paragraphs, links, line breaks etc can be used in the DD Tag <dd>.

DD Tag is a closed tag and needs to be closed using HTML closing DD Tag </dd>

Syntax of HTML DD Tag

<dd>
Items definition goes here
</dd>

Example of HTML DD Tag

HTML dd Tag Code Output 
<dl>
<dt>Sugar</dt>
<dd>Sweet in Taste</dd>
<dt>Salt</dt>
<dd>Salty in Taste</dd>
</dl>
Sugar
Sweet in Taste
Salt
Salty in Taste

In the example output we can see that the properties of “Sugar” and “Salt” are described using the DD HTML tag.

Also note the usage of HTML DL Tag and HTML DT Tag in the example.

HTML DD tag supports all HTML Global Attributes and HTML Event Attributes.

HTML DD Tag Supporting Browsers

S. No. Browser Supported(Yes/No)
1 Internet Explorer Yes
2 Firefox Yes
3 Google Chrome Yes
4 Opera Yes
5 Safari Yes

HTML Kbd Tag

by

HTML Kbd TagHTML kbd tag <kbd> defines the text that a user should input via keyboard or similar device.

We can also say that the Kbd Tag <kbd> is used to indicate a text which is supposed to be entered by the user.

The Kbd tag <kbd> is a closed tag and needs to be closed via closing kbd HMTL tag </kbd>.

Syntax of HTML Kbd Tag

<kbd>
Text that user will input..
</kbd>

Example of HTML kbd Tag

HTML Kbd Tag Code Output 
<p> To logon to techhoney please write</p>
<kbd> techhoney.com in browser’s
address bar</kbd>
<p> and press enter</p>
To logon to techhoney please write

techhoney.com in browser’s address bar

and press enter

Here the example above HTML Kbd Tag we can see that the text “techhoney.com is browser’s address bar” is formatted in a different way than the text neighboring it.

HTML Kbd Tag supports all HTML Event Attributes and HTML Global Attributes.

HTML Kbd Tag Supporting Browsers

S. No. Browser Supported(Yes/No)
1 Internet Explorer Yes
2 Firefox Yes
3 Google Chrome Yes
4 Opera Yes
5 Safari Yes