In this post you will learn what are the elements in HTML and how they work, I’m going to demonstrate with codes and visual images that will help you understand how the tags created and used to display heading, paragraph, forms, images, links, list of items and more.
HTML stands for Hyper Text Markup Language, design web pages using the markup language OR write the electronic documents (called pages) that are displayed on world wide web (the internet). Without HTML, browsers would not know how to display text elements, load image, or other elements..
The global structure of an HTML 5 document:-
The element of HTML 5 is also called tags. Let’s define the tags of HTML 5. Basically HTML 5 elements (tags) are head, body, header, nav (navigation), main, article, aside, p(paragraph), footer, img (image), time, audio, video, form, table and etc.
- HMTL
- HEAD
- TITLE
- META
- STYLE
- BODY
- HEADER
- NAV
- MAIN
- ARTICLE
- ASIDE
- H1, H2, H3, H4, H5, H6
- P (paragraph)
- IMG
- STRONG
- ITALIC
- A
- LIST
- VIDEO
- AUDIO
- FORM
- TABLE
<!DOCTYPE>
<HTML lan>
<HEAD>
<TITLE>My first HTML document</TITLE>
</HEAD>
<BODY>
<main>
<P>Hello world!</p>
</main>
</BODY>
</HTML>
Let’s defined the html tags one -by-one:-
HTML
An HTML code that defines every structure on an HTML page And including the placement of text, images, links etc. HTML tags begin with < (less than) and ending with >(more than).
The HTML tag also includes the lang. lang means language. You can define like-lang = “language_name” like– “en”(English), “fr”(french)etc.
<html lang=”en”>
HEAD
Head it means head of the page. The head tag also includes the title, meta, link and also you can include the style tag. You can create a style tag on a new page or tab.
Head tag begin like this <head> and ending </head>
Title
Unlike the title element, which provides information about an entire document and may only appear once. Title it means give a name of the page or lesson, what post are you writing.
Title tag begin same like the head tag <title> here write the name of the title And close the tag </title>
<TITLE>My first HTML document</TITLE>Meta
Meta is used likes this within head tag meta is self closing tag
<meta charset="UTF-8">Charset which is the name of the value UTF -8 Each meta element specifies a property/value pair. Like- charset=UTF-8
link
The link tag defines the relationship between the current document and an external resource.The link tag is used commonly for linking or name to an external style sheet.
It is the self closing tag Link tag like this
<link rel="stylesheet" href="main.css">Style
In HTML style tag is used to decorate the html page or document; each HTML element/tag is targeted and styled with CSS. which is supported in all browsers. Style is used like inline it means within each tag. Style tag started with <style> and here will be all the parts that you have to do styling.and closed </style>
<style>
body{
background-color: violet;
margin: 0px;
padding: 0px;
}
header{
background-color: lightblue;
padding-left: 5px;
}
nav{
background-color: rosybrown;
}
main{
display: flex;
width: 90%;
margin: 0 auto;
background-color: teal;
}
article{
width: 74%;
padding:3px;
margin: 0px;
background-color: tomato;
padding-bottom: 10px;
}
pre{
border: double;
background-color: #edf;
border-color: rebeccapurple;
display: block;
margin-right: 40%;
margin-left: 10px;
}
nav{
padding: 3px;
}
img{
margin: 10px;
border: 5px solid;
border-radius: 10px;
height: 100px;
}
table,th,td{
border-collapse: collapse;
border: solid 2px ;
padding-left: 10px;
margin-left: 10px;
margin-bottom: 10px;
}
aside{
width: 29%;
float: right;
margin: 0px;
padding: 5px;
color: snow;
background-color: yellowgreen;
}
p{
color: white;
letter-spacing: 2px;
}
h3{
color: white;
background-color: #425;
}
footer{
background-color: steelblue;
color: snow;
padding: 10px;
margin-bottom: 20px;
}
</style>In this style tag i am to style the html elements like- body tag , p tag , img tag and etc. In body tag i am using the font-family it will applied all html elements which is monospace font-family, and font-size 18px () it means the all element have size of font will 18px. And in the p tag i am using the white color which applied all p tag on the page, means the p elements will be white color. And in the image (img) tag i’m applied the border on image and border-radius ( Radium means that it is converted into a round.) And that’s how all the elements will be styled.
BODY
In HTML body means, the body of the document , where all sections(contents ) are contained such as headers, navigational, main, articles, aside, paragraphs, images, hyperlinks, audios, videos, tables, lists etc.
it started with <body> here the contents are defined, and close the tag like this </body>
Now, let us define all the sections within the body tag:
Header
The HTML header tag represents the introduction contents, within the header tag you can include one heading and some link with the help a tag. a (anchor tag) an anchor tag is a link, media connection pages such as Facebook, YouTube, or uses anchor tags to add many pages or posts. Anchor tag has a href in which you name of the link. like this href= ” value” Than the value name which is show in the browser page.
<a href="facebook">FB</a>
<a href="footer">BOTTOM OF THE PAGE</a>
<a href="middle">MIDDLE OF THE PAGE</a>Anchor tags will look like this in you browser
Now, An Example of the header tag with a tag
<header>
<h1>Heading first</h1>
<a href="facebook">FB</a>
<a href="youtube"> YT</a>
<a href="footer">BOTTOM OF THE PAGE</a>
<a href="middle">MIDDLE OF THE PAGE</a>
</header>Header tag with anchor tag will look like this in you browser
Now, let’s use the style in the header tag:-
This the style of header tag.
header{
background-color: lightblue;
padding-left: 5px;
} This code (with styling code) will look like this in you browser.
main
The HTML main tag content area consists of content that is directly related of a document. In main tag is the article, aside, tags is also included. (article, aside,)these two have all the tags like – h1, h2, h3, h4, h5, h6, p, img, audio, video, p, pre, tables, list, etc.
main tag with article, aside, p, pre, h1-h6, table, list etc.
The style code in the below is not used.
<main>
<article>
<h3>Article Area</h3>
<pre>
Nature is beautiful in every way.
Wonderful, exciting
And needs our care.
So listen, learn and do your part to keep nature
Beautiful forever.
</pre>
<h3>This the table</h3>
<table>
<thead>
<tr>
<th>int</th>
</tr>
</thead>
<tbody>
<tr>
<td>"%d"</td>
</tr>
</tbody>
</table>
</article>
<aside>
<h2>Aside Area</h2>
<P>Hello world!</p>
<ul>
<li>Hello..</li>
<li>Hello..</li>
<li>Hello..</li>
</ul>
</aside>
</main> Main tag with article, aside tags will look like this in you browser
The below code have used the style code which is given in the above style code section.
<!DOCTYPE html>
<HTML lang="en">
<HEAD>
<TITLE>My first HTML document</TITLE>
</HEAD>
<BODY>
<header style="margin: 0 auto;">
<h1>Header</h1>
<a href="#facebook">FB</a><br>
<a href="#youtube"> YT</a><br>
<a href="#footer">BOTTOM OF THE PAGE</a><br>
<a href="#middle">MIDDLE OF THE PAGE</a><br>
</header>
<main>
<article>
<h3>Article Area</h3>
<pre>
Nature is beautiful in every way.
Wonderful, exciting
And needs our care.
So listen, learn and do your part to keep nature
Beautiful forever.
</pre>
<img src="flower-photo.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Molestiae eaque voluptatum voluptas fuga excepturi delectus nam,
blanditiis pariatur. </p>
<h3>This the table</h3>
<table>
<thead>
<tr>
<th>Light</th>
</tr>
</thead>
<tbody>
<tr>
<td>blue</td>
</tr>
</tbody>
</table>
</article>
<aside>
<h3>Aside Area</h3>
<P>Hello world!</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Dicta.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing voluptatum?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur</p>
</aside>
</main>
</BODY>
</HTML>This code (with styling code) will look like this in you browser.
FOOTER
Footer element to defined for the footer document or section.
In footer often include
- Author information
- Contact information
- Links tags
- Related to documents
This is the address tag for addressing
<address>
402/3 XXyyzz
+91 0000 000 000 , +91 0000 000 000
</address>Contact information should included in the address tag within the footer.
<footer>
<h3>Footer Area</h3>
<address>
402/3 xxyyzz<br>
+91 0000 000 000 +91 0000 000 000 <br>
</address>
2020
</footer>The footer tag (with styling code)will look like this in you browser
HTML SKELETON
EXAMPLE :
Example of HTML Document Declaration
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style> Style of the document</style>
</head>
<body>
The content of the document......
<header>Header of the document</header>
<nav> Navigation of the document</nav>
<main>
<article>
<p> Paragraph of the document</p>
<ol>
Order list of the document
<li>List of the document</li>
</ol>
<ul>Unoder list document
<li>list of the document</li>
</ul>
</article>
<aside>
</aside>
<footer>
Footer of the document
</footer>
</body>
</html>EXAMPLE
HTML Elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
</title>
<style>
</style>
</head>
<body>
<header>
</header>
<nav>
</nav>
<main>
<article>
</article>
<aside>
</aside>
</main>
<footer>
</footer>
</body>
</html>