How to use html5 nav tag?

NAV TAG

Introduction of HTML5 <nav> Tag

In this post, you will learn about the HTML <nav> tag which is an html5 element. It creates a section with a collection of website navigation links. html5 <nav> tag is commonly used to organize the links on the webpage or website. 

Read More

How to install Google Fonts on your Blogger Blog?

GOOGLE-FONTS-ON-BLOG

      

         My dear bloggers, today you will learn about how to install Google Web Fonts on your blog or website to improve text format. Google offers a lot of free Web Fonts. You can choose your favorite font.

Read More

How to use section tag in html5?

HTML5-SECTION-TAG

<section> Tag in HTML5

Introduction of <section> tag 

Syntax of <section> tag 

Attributes of <section> tag 

Read More

How to use meter tag in html5?

HTML-METER-TAG

<meter> Tag in HTML5

Introduction of <meter> tag

Syntax of <meter> tag

Attributes of <meter> tag

Example of <meter> tag with attribute

Read More

How to use time tag in html5?

HTML-TIME-TAG

<time> Tag in HTML5

1. Introduction of <time> tag

2. Syntax of <time> tag

3. Attributes & events of <time> tag

4. Example of <time> tag

Read More

How to use header tag in HTML5?

HEADER-TAG-IN-HTML5

<header> Tag in HTML5

1. Introduction of <header> tag 

2. Syntax of <header> tag 

3. Attributes of <header> tag 

4. Example of header tag

Introduction to HTML5 <header> Tag

Before HTML5, any header of the webpage was defined by the DIV element. The id was given to separate the DIV section of the header from the other div section. As this has been given below.

      <div id = "header">

     // header text and image content here

      </div>

Similar to the header, the other div elements also defined the id. Thus it was difficult to manage the different ids of each div.

HTML5 provides a dedicated tag to define every important section of the website making them easy to manage and apply styles on these. One of the tags is the <header> tag.

<header> tag of HTML5 is used to define a webpage or a header of a section. The header is an important part of any website. Header displays information about a website. Such as the name of the website and logo etc.

HTML5 <header> tag creates a container in which you can display any type of introductory content or navigational links. Mainly the information given below is displayed in the <header> tag.

1. Heading Tags.

2. Logo or Icon.

3. Any information about the content(Description).

The <header> tag can be easily managed by CSS. You will learn in next CSS course. 

Syntax of HTML5 <header> Tag

The syntax for <header> tag is being given below.

             <header>

           // Header text and image content

             </header>

Inside the <header> tag, you define the headline of the website from the heading tag and the headline of the website from the paragraph tag. For example, in the case of MyBlogHelp Tutorials, the <header> element will be defined as

            <header>

              <h1> MyBlogHelp Tutorials </h1>

              <p> Blogging, SEO, Design & Development </p>

            </ header>

As I've told you earlier, the <header> element is not only used for the webpage but also to define a header of a section. So you can use more than one header tags in a single document. You can define a <section> header like this.

      <section>

   <header>

         <h1> Heading Section </h1>

   </header>

   // Other section elements

       </section>

  

One important thing to be noted that you can’t define a <header> tag in <footer>, <address> or any other <header> tag.

Attributes of HTML5 <header> Tag

There is no specific attributes of the <header> tag are available. These tags support all HTML global attributes such as id, class, etc. If you are using <header> tag more than once in your webpage, these attributes can differentiate. The syntax is given below.

<header id = "WebsiteHeader">

// content here

</ header>

<header> id = "sectionHeader">

// content here

</ header>

Styling HTML5 <header> Tag

Like any other tag, CSS rules can be applied to the <header> tag as well. The syntax is given below.

header

{

                                      // CSS rules here

}

Events related to HTML5 <header> Tag

<header> tag supports all global event attributes. By using Event attributes, you can handle events that are generated on the <header> element. The syntax is below.

<header onmouseover = "script-here">

// content here

</header>

The onmouseover attribute has been used in the above syntax. Similarly, other events can also be handled.

Example of HTML5 <header> tag

<!DOCTYPE html> <html> <head> <style> header { width: 100%; height: 100px; padding-left: 10px; position: absolute; top: 0; left: 0; border: 1px solid #ccc; background-color: #fa4303; color: white; line-height: 20px; } </style> </head> <body> <header> <h1> My Blog Help </h1> <p> This is a Blog for Blogging, SEO, Web Design and Development & Computer Tips </p> </header> </body> </html>

 The above script generates the given output below.

EXAMPLE-OF-HEADER-TAG

Previous:- How to use figure tag in html5?

Next:- How to use time tag in html5?

Read More

How to use figure tag in html5?

HTML5-FIGURE-TAG

<figure> Tag in HTML5

        1. Introduction of <figure> tag

        2. Syntax of <figure> tag 

        3. Attributes of <image> tag 

        4. Example of <figure> tag

Read More

How to use aside tag in html5?

ASIDE-TAG-IN-HTML5

<aside> Tag in HTML5

• Introduction of <aside> tag 
• Syntax of <aside> tag
• Attributes of <aside> tag
• Example of <aside> tag 

Read More

How to use details Tag in HTML5?

DETAILS-TAG-IN-HTML5

<details> Tag in HTML5

   1. Introduction of <details> tag 

   2. Syntax of <details> tag 

   3. Attributes of <details> tag
   4. Example of <details> tag

Read More

How to use wbr tag in html5?

HTML5-WBR-TAG

<wbr> Tag in HTML5

1. Introduction of <wbr> tag 

2. Syntax of <wbr> tag 

3. Attributes of <wbr> tag 

4. Example of <wbr> tag

Read More

How to use article tag in HTML 5 ?

ARTICLE-TAG-IN-HTML5

HTML5 <article> Tag

1. Introduction of HTML5 <article> tag
2. Syntax of HTML5 <article> tag

3. Attributes of HTML5 <article> tag

4. Example of HTML5 <article> tag

Introduction to HTML5 <article> Tag

The header, footer and sidebar in the website can be the same on different pages but the article is unique on every page.

The article is the section of a website that contains the main content and which is most important to the user. On the basis of this section of your website, you get a ranking in search engines.

The content of the <article> tag is independent of the rest of your website content. That is, this content does not require other content. As there are different articles in the newspaper and these are all independent, so every article tag on your website is independent.

An article usually contains headings and paragraphs. Headings and paragraphs are defined by <h1> and <p> tags respectively. The HTML syntax of an article is as follows.

Syntax of HTML5 <article> tag

<article>

<h1> Heading </ h1>

<p> This is a paragraph. </ p>

</ article>

Sub headings (<h2>, <h3> etc.) are also used as required in an article. The footer can be also define in the <article> element. As shown below.

<article>

<h1> Heading </ h1>

<p> This is a paragraph related to main heading </ p>

<h2> Sub Heading </ h2>

<p> This is a paragraph related to subheading </ p>

<article>

Attributes of HTML5 <article> Tag

There is no element specific attribute of the <article> tag. But this tag supports all global attributes such as id, class, title etc.

<article id = "HTMLTutorial">

</ article>

Similarly, you can use other global attributes with <article> tag.

Styling <article> Tag

Like any other HTML element, you can also apply CSS rules to the <article>. You can define the width, color, and display of the article by CSS.

article

{

             width: 920px;

            color: # 272727;

             display: block;

}

As you can see in the syntax above, styles are applied by CSS on the <article> element. Similarly, you can apply many more CSS rules on this tag.

<article> Event Attributes

<article> element supports all global event attributes like onclick, onfocus, etc. By handling these events, you can make the web page interactive.

<article onclick = "script-code-here">

As you can see in the syntax above, onclick event attribute has been defined in the <article> element. Similarly, you can also define other event attributes.

Example of HTML5 <article> tag.

<!DOCTYPE html> <html> <head> <style> article { width: 300px; color: green; text-align: justify; display: block; } </style> </head> <body> <article> <h1> About article Element </h1> <p> You use article tag to show an article in your website. Every article on your website is unique. </p> <h2> More About article Element </h2> <p> You can use all global attributes and global events with article tag. </p> </article> </body> </html>

As you can see, in the above example, the main heading has been created inside the <article> element and later a paragraph has been added after that a subheading and a paragraph has been added again.

Similarly, more headings and paragraphs can be added in an <article> element. The above script generates output as below.

ARTICLE-TAG-EXAMPLE

Previous:- How to use base tag in HTML?

Next:- How to use wbr in HTML5?

Read More

How to use menu tag in html?

MENU-TAG-IN-HTML

HTML <menu> Tag

           1. Introduction of <menu> tag 
           2. Syntax of <menu> tag 

           3. Attributes of <menu> tag 
           4. Example of <menu> tag

Introduction to HTML <menu> Tag

HTML <menu> tag was included in the old versions but later it was excluded in HTML version 4.0.1. Now, this tag is included in HTML5 after redefining. <menu> tag is used to define the list of commands.

For example, you add an image to the web page. If you want to display your menu of the defined commands, and not display a default menu when someone right clicks on this image. For this, you will have to use the HTML <menu> tag.

Every command in the list of commands performs a specific task. For example, when you right-click on the desktop in the Windows operating system, you can see a list of some commands that perform different tasks.

Similarly, you can also create a list of commands for HTML elements, which will show the list of commands when the user right clicks on the specific text or image. Context menus, popup menus, toolbars and form controls can be created by <menu> tag.

In whatever element you want to apply the menu on the HTML element, you define the context menus attribute and pass it as the id value of the <menu> tag.

HTML <menuitem> Tag

The <menu> tag works as a container for the list of commands. Every command inside it is defined by <menuitem>. The <menuitem> tag has two main attributes label and icon.

In this, the display name of the command is defined by the label attribute and icon is defined by icon attribute. Defining the icon of the command is not mandatory. The general syntax of this tag is given below.

<menuitem label = "command-name" icon = "icon-image-url" event-attribute = "action"> </ menuitem>

What actions will be taken when clicking on a command, you can define it by HTML event attributes. For example, you can define from onclick event attribute what action will be taken when clicking on the command.

Syntax of HTML <menu> Tag

The general syntax for the HTML <menu> tag is given below. 
               

              <menu label = "" type = "" id = "">

             <menuitem attributes ...>

             </menuitem>

               </menu>

As you can see above in syntax, it is defined <menuitem> tag inside <menu> tag. It can also be called the subtag of the <menu> tag.

Attributes of HTML <menu> Tag

With the <menu> tag, the available attributes are described as below.

label 

With this attribute, you can define a display name of the menu. It is not mandatory to define it.

Type

 By this attribute, you can define what type of menu you want to show. This attribute can have three possible values those are given as below.

list - When you want to create a list of commands.

toolbar - When you want to create a toolbar

context - When you want to create a context menu

<menu> tag also supports all global and event attributes of HTML.

Example of <menu> tag in HTML

<!DOCTYPE html> <html> <head> <title> Example of Menu Tag </title> </head> <body> <img src = "MBHLogo.jpg" contextmenu = "myMenu"> <menu type = "context" id = "myMenu"> <menuitem label = "Reload" onclick = "window.location.reload ();"> </menuitem> </menu> </body> </html>

An image is added to the above example. The context menu has been applied on the user-defined menu (myMenu) on this image. In this menu, the refresh command is given which will reload the image when clicked. This example produces output as below.

EXAMPLE-HTML-MENU-TAG

 This tag works only in the Mozilla Firefox web browser.

Previous:- What is meta tag in HTML?

Next:- How to use address tag in HTML?

Read More

How to use base tag in HTML?

BASE-TAG-IN-HTML

<base> Tag in HTML

1. Introduction to  <base> tag in HTML.

2. Syntax of <base> tag in HTML.

3. Attributes of <base> tag in HTML.

Read More

How to use HTML hr and br Tag?

HTML-HR-BR-TAGS

HTML <hr> Tag

      The HTML <hr> tag is used to separate the content according to the subject. This tag generates a horizontal line that can be used to separate different topics. It is also called horizontal rule in HTML. In HTML5, the <hr> tag defines the thematic break and in old versions, it was used to create a horizontal rule.

Read More

How to use HTML address tag?

HTML ADDRESS TAG

Introduction of HTML <address> Tag

HTML <address> tag is used to define the contact information of author or owner of a document. The <address> tag was added in HTML3. This tag is available in all subsequent versions of HTML3. It is also included in HTML5.

Read More

How to use HTML Meta Tags?

HTML Meta Tags

What are HTML <meta> Tags

Meta-data is represented by the <meta> tag. Meta-data means data about data. In the simplest terms, this tag provides information about the HTML document.

Read More

How to use HTML script & noscript Tag?

script tag

Introduction of HTML <script> Tag

<script> tag of HTML is used to define client side script in web pages. For example, through the <script> tag you can add JavaScript in the HTML document. JavaScript is a client-side scripting language. With the help of this, you can generate dynamic content and validate forms etc.

Read More