HTML Tags : Part 5 - What are HTML Styles and Semantics Tags?



HTML Tags Part V

What are HTML Styles and Semantics Tags?

As we already discussed about HTML Tags earlier. Now we are going to discuss each of Tags step by step in details with practical.
Here you can check the format of HTML code which looks likes: 
Format of Code:
<!DOCUMENT HTML>
<html>
<head>
<title></title>
</head>
<body>
----rest document code----
</body>
</html>
In this HTML Tags Part V we are going to discuss about very interesting tags which are important to design a Web Page and get information about users in HTML. These tags will help us to create and setup HTML document. This is useful for layout design and display.
In this post we will describe 1 type of HTML tags:

HTML Styles and Semantics Tags

So let’s start.

HTML Styles and Semantics TAGS 

Tag
Tag Name
Description
<style>
Style Tag
Define style information about the document.
<div>
Division Tag
Define a block box section as a container
<span>
Span Tag
Style a line in a section
<header>
Header Tag
Define the head area of the document
<footer>
Footer Tag
Define the foot area of the document
<main>
Main Tag
Specify the main content of the document
<section>
Section Tag
Define a section in document
<article>
Article Tag
Define a article in document
<aside>
Aside Tag
Define content aside in document
<details>
Details Tag
Define additional details that can be view or hide
<dialog>
Dialog Tag
Define a dialog box in document
<summary>
Summary Tag
Define a visible heading for details in document
<data>
Data Tag
Adds a machine-readable translation of a given content
 
<style> tag:
The style tag in HTML is mainly use to design our webpage viewable or presentable. If you want to set a text color or background with color or image or set the height and width in HTML, all formatting of layout is comes under Style tag. We can say this tag is use for styling your webpage. We can use style tag in 2 ways:
1.      Style under head tag section.
2.      Style under body tag section with each element.
In head section we use to define a <style> tag for complete webpage and define the formatting of each attribute by there name or ID or Class. The format of code is looks like:
<html>
<head>
<style>
            Body{
Background-color = black;
}
<style>
</head>
<body>
</body>
</html>
This method is generally works as CSS part which we will discuss in brief later.
The second method is know as Inline-CSS where we will formatting each attribute by there own. Lets check below example:
<html>
<head>
</head>
<body style:”background-color:black;”>
<h1 style:”font-family:Arial; font-size:25px; color:white;”>Hello HTML Lovers</h1>
<div style:”width:250px; height:250px; border:2px solid green; bacground-color:lime;”>
</div>
</body>
</html>
<div> tag:
Div tag in html is act like a small container which contains items like:text, image etc, inside it. The div tag is most used tag in html which helps to format our webpage display.
Its also known as “Division Tag” which is a block level tag. Let check the example:
<html>
<head>
</head>
<body style:”background-color:black;”>
<h1 style:”font-family:Arial; font-size:25px; color:white;”>Hello HTML Lovers</h1>
<div style:”width:250px; height:250px; border:2px solid green; bacground-color:lime;”>
<h2>This is a Sub-Heading</h2>
<p> This is a paragrapg</p>
</div>
</body>
</html>
<span> tag:
The span tag is bit similar and combination of style and div tag. Which is use to style an in-line elements. Assume u have a paragraph with blue color and u want to make few line in red color in it, span tag is the solution. Lets check the example:
<html>
<head>
</head>
<body style:”background-color:black;”>
<h1 style:”font-family:Arial; font-size:25px; color:white;”>Hello HTML Lovers</h1>
<div style:”width:250px; height:250px; border:2px solid green; bacground-color:brown;”>
<h2>This is a Sub-Heading</h2>
<p style:”color:blue;”> This is a paragrapg This is a paragrapg This is a paragrapg This is a paragrapg This is a paragrapg This is a paragrapg This is a paragrapg This is a paragrapg This is a paragrapg <span style=”color=red;”>This is a paragrapg This is a paragrapg This is a paragrapg This is a paragrapg</span> This is a paragrapg This is a paragrapg This is a paragrapg This is a paragrapg This is a paragrapg This is a paragrapg This is a paragrapg This is a paragrapg This is a paragrapg This is a paragrapg This is a paragrapg This is a paragrapg This is a paragrapg This is a paragrapg This is a paragrapg </p>
</div>
</body>
</html>
<header> tag:
Header tag is also like a container for a webpage which is use to contain most important information relates to the webpage i.e.: Logo, Document Title, navigation links, images etc. you can say its like a cover of a book or CD box. Its introduce in HTML 5.
<html>
<head>
</head>
<body style:”background-color:black;”>
<header>
<h1>This is the heading.</h1>
<h4>This is the sub-heading.</h4>
<p>This is the metadata.</p>
</header>
<h1 style:”font-family:Arial; font-size:25px; color:white;”>Hello HTML Lovers</h1>
<div style:”width:250px; height:250px; border:2px solid green; bacground-color:brown;”>
<h2>This is a Sub-Heading</h2>
<p style:”color:blue;”> This is a paragrapg This is a paragrapg This is a paragrapg This is a paragrapg This is a paragrapg <span style=”color=red;”>This is a paragrapg This is a paragrapg This is a paragrapg This is a paragrapg</span> This is a paragrapg This is a paragrapg This is a paragrapg This is a paragrapg </p>
</div>
</body>
</html>
<footer> tag:
Footer tag is same like header tag which contains information related to document author, copy-rite information etc, which contains footer information. Check out below example:
<html>
<head>
</head>
<body style:”background-color:black;”>
<header>
</header>
<h1 style:”font-family:Arial; font-size:25px; color:white;”>Hello HTML Lovers</h1>
<div style:”width:250px; height:250px; border:2px solid green; bacground-color:brown;”>
<h2>This is a Sub-Heading</h2>
<p style:”color:blue;”> This is a paragrapg This is a paragrapg This is a paragrapg This is a paragrapg This is a paragrapg <span style=”color=red;”>This is a paragrapg This is a paragrapg This is a paragrapg This is a paragrapg</span> This is a paragrapg This is a paragrapg This is a paragrapg This is a paragrapg </p>
</div>
<footer>
<nav>
<p>
<a href="#">About Us</a>| 
<a href="#">Privacy Policy</a>| 
<a href="#">Careers</a> 
</p>
</nav>
<p>@codewithtechschool, Some rights reserved</p>
</footer>
</body>
</html>
<main> tag:
As name defines it contains main data of your document.it contain unique data relates to your document or heading. Most important thing is it can be use once in a page. U can say it’s a place where your main article comes. Lets check below example:
<html>
<head>
</head>
<body style:”background-color:black;”>
<header>
</header>
<main>
<h1 style:”font-family:Arial; font-size:25px; color:white;”>Hello HTML Lovers</h1>
<div style:”width:250px; height:250px; border:2px solid green; bacground-color:brown;”>
<h2>This is a Sub-Heading</h2>
<p style:”color:blue;”> This is a paragrapg This is a paragrapg This is a paragrapg This is a paragrapg This is a paragrapg <span style=”color=red;”>This is a paragrapg This is a paragrapg This is a paragrapg This is a paragrapg</span> This is a paragrapg This is a paragrapg This is a paragrapg This is a paragrapg </p>
</div>
</main>
<footer>
</footer>
</body>
</html>
<section> tag:
Section tag helps you to divide your page content into the sections. Assume a book with chapter wise section. This tag helps to divide contains to section or sub sections. The main advantage is , it’s a semantic element, which describes its meaning to both browser and developers. Lets check out the example:
<html>
    <head>
        <title>Section tag</title>
    </head>
    <body>
        <section>
            <h1> Section 1</h1>
            <p>Content of section 1</p>
            <section>
                <h1>Subsection 1</h1>
                <h1>Subsection 1</h1>
            </section>
        </section>
        <section>
            <h1>Section 2</h1>
            <p>Content of section 2</p>
            <section>
                <h1>Subsection 2</h1>
                <h1>Subsection 2</h1>
            </section>
        </section>
    </body>
</html>
<article> tag:
The article tag is newly introduce in HTML5. Its mainly use to represent article in a document. An article can be a: blog content, magazine, newspaper article or so on. It is more similar to <div> tag, and display the stylish work same. However, using the <article> element instead of <div> provides more semantic information to screen readers, search engines, and third-party applications. lets check out the example:
<html>
<head>
    <title>Demo of article</title>
</head>
<body>
    <article>
        <h1> code with tech school</h1>
        <p> This is a article content This is a article content This is a article content This is a article content This is a article content This is a article content This is a article content This is a article content This is a article content This is a article content This is a article content This is a article content This is a article content This is a article content</p>
    </article>
</body>
</html>    
<aside> tag:
aside tag in HTML represents some portion of a document or a page whose content is only indirectly related to the document's or page's main content. The aside content should be indirectly related to the primary content of a page or a document. The <aside> content is often placed as a sidebar in a document. Check out below example:
<html>
<head>
</head>
<body>
        <div>Aside Tag Example</div>
        <aside>
            <h1>CodewithtechSchool</h1>
            <p>A Blog portal for Code Lovers</p> 
        </aside>
    </body>
</html>
<details> tag:
The detail tag is create to make an additional view for user. Like a text with hidden data. You can check the below example for better understanding:
<html>
    <head>
        <title> </title> 
    </head>
    <body>
        <details>
            <summary>Code With Tech School</summary>
            <p>Blog for Coding Lover</p>
            <div>This blog is use to lean web Technology and more.</div>
        </details>
    </body>
</html>        
<dialog> tag:
As name identified its use to make an additional popup or webpage. Consider the example below:
<html>
    <head>
        <title></title>
    </head>
    <body>
        <h1><dialog> tag</h1>
        <dialog open>Welcome to CodewithTechSchool</dialog>
    </body>
</html>        
<summary> tag:
Its use to define a summary for <details> element, which is use along with <details> element. Check below example:
<html>
<body>
<details>
  <summary>GeeksforGeeks.</summary>
  <p> It is a portal for geeks.</p>
</details>
</body>
</html>
<data> tag:
<data> element gives an address to a given content with a machine-readable translator. Checkout below example:
<html>
<head></head>
<body>
<h1>Animals</h1>
<p>Click on a Animal Name to see what type it is:</p>
<ul>
  <li><data value="009">Crow</data></li>
 <li><data value="010">Dog</data></li>
 <li><data value="011">Clown</data></li>
 </ul>
</body>
</html>

So by today we have finished with our HTML tags tutorials. So now don’t wait keep code keep trying.
Thank you
References:

9 Comments

  1. Informative article... This will help to know more tags...

    ReplyDelete
  2. Very well narrated by covering every minute details. Really impressed 👍

    ReplyDelete
  3. Very much cleared my doubts related to semantic tags thanks

    ReplyDelete
  4. Your explanation with images was excellent! Keep up teaching us oike this.

    ReplyDelete
  5. Every serious blogger an idea of HTML, no matter how basic it is. Well done.

    ReplyDelete
  6. Very informative and easy to understand ❤️

    ReplyDelete