HTML Elements

Every web document is composed of HTML elements that are written using starting and ending tags. These pair tags are used to hold contents of different types. Some elements uses pair tag and some of these use single tag such as br and hr. Every HTML element has some predefined properties that will uniquely reflect in each browser. Such as heading tags have different font sizes. Strong and em tags has some predefined text decoration and font weight.

Common HTML Elements

There are number of HTML elements used in webpage templates, but some of the elements are very common and important. These tags are used frequently and have importance in SEO. Some of these tags are listed here.

Sr. Tag Syntax Description
1 Document Type <!DOCTYPE> This tag is used to define the document type and used on the top of the page.
2 HTML <html></html> HTML tag is root element of every webpage. All other tags are used within this tag.
3 HEAD <head></head> Head tag contain the information about title of the page and all external resources are also specified in this tag, such as scripts and css libraries.
4 BODY <body></body> The entire text and graphics that will display in the browser render area written in this tag. It contains all other tags such as paragraph, emphasis, strong, bold, section, aside, lists, forms and table tags.
5 HEADINGS <h1></h1> to <h6></h6> These tags are used to specify headings of the contents written in body tag. There is proper hierarchy of heading tags that has different importance in SEO and different in style.

Example

HTML basic example

<!DOCTYPE html>
<html>
    <head>
        <title>
            Here is the Index File
        </title>
        <script src="app.js"></script>
        <link rel="stylesheet" href="app.css">
        <meta name="keywords" content="">
    </head>
    <body>
        <h1 class="h11">
            Heading H1
        </h1>
        <h2>
            H2 Heading
        </h2>
        <p>
            This is the test paragraph
        </p>
        <strong>
            List of Fruits
        </strong>
        <ol>
            <li>Mango</li>
            <li>Banana</li>
            <li>Orange</li>
        </ol>
        <hr>
        <em>I am getting Emphasis</em>
    </body>
</html>

Output

The output of the above HTML template will be as.

HTML5 basic tags and their use

HTML Empty Tags

Some html tags are have only single markup tag. There is no closing tag and does not hold any content/text. That is why these are called empty tags. Examples of empty tags are.

  • Break Tag <br/>
  • Image Tag <img />
  • Horizontal Line Tag <hr/>
  • Meta Tag <meta />

HTML5 Semantic Tags

In previous versions of the HTML web developers define the structure of the page using div tag. This type of structure was not much efficient and does not provide much information to the SERP. HTML5 introduce some new important tags that have semantic to define the contents of the page. These are also helpful for search engines to understand page contents more effectively. These tags are called semantic tags. Some of these tags are as:

  1. Header
  2. Main
  3. Aside
  4. Nav
  5. Section
  6. Footer

HTML5 Header Tag

This tag appear on the top of the page and include information that are such like of some banner or introduction to the entire document. We can easily create a header using html5 semantic tag.

Syntax

<header>
</header>

Nav tag

This is pair tag that contains page navigation. Menu are designed inside this tag provide information to the search engines about navigation of the website.

Main tag

This tag contain all the main contents of the page such a text or images.

Aside Tag

Aside tag in HTML5 used to include sidebar items, which may include other tags. Most commonly it include some kind of website navigation to important links.

Section Tag

Section tag is also important tag that can be used to define some sections of separate  text / contents inside the webpage. This works similar to the div tag in previous versions of HTML. But this section tag is semantic tag which means this is not only define the page division it also provide semantic to the webpage contents.

HTML5 Footer Tag

All website normally contains a bottom area which may include social media, contact, map or other important links. Before HTML5 this section was designed using fundamental div tags. But now this section become more semantic by using footer tag. All the contact information can easily designed inside this tag. The commonly used items inside footer tag are.

  • Contact Information
  • Map / Geo Information
  • Social Media Links
  • Terms and Conditions
  • Privacy Policy

 

Comments
Login to TRACK of Comments.