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>
<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>
</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:
Informative article... This will help to know more tags...
ReplyDeleteVery well narrated by covering every minute details. Really impressed 👍
ReplyDeleteVery nice article
ReplyDeleteVery much cleared my doubts related to semantic tags thanks
ReplyDeleteGreat codes
ReplyDeleteYour explanation with images was excellent! Keep up teaching us oike this.
ReplyDeleteEvery serious blogger an idea of HTML, no matter how basic it is. Well done.
ReplyDeleteWell explained
ReplyDeleteVery informative and easy to understand ❤️
ReplyDelete