Updated March 8, 2023
Introduction to How HTML Works?
HTML is a tag-based language used to development of web pages; HTML stands for Hyper Text Markup Language. Hypertext refers to the way in which Web pages are linked together. Thus, the link available on a webpage is called Hypertext. It is a markup language which is tags tell the browser how the page will be rendered on it. Berners-Lee developed it in late 1991, but “HTML2.0” was the first standard specification published in 1995. Later, its many HTML versions came like HTML 4.0; currently, the latest version of it is HTML5.0 which is very famous in front end websites development.
Structure of how HTML page works
Let us see the structure of how the HTML page works.
<!DOCTYPE html>
<html>
<head>
<title>title tag of html</title>
</head>
<body>
<h1>heading tag of html</h1>
<p>paragraph tag of html<p>
</body>
</html><!DOCTYPE>
This tag defines the type of the document and HTML version.
<html>
Above tag encloses the complete HTML programming language document, comprises of document header which is represented by <head>…</head> and document body which is represented by <body>…</body> tags.
<head>
head tag represents the document’s header which can keep other HTML tags like <title>, <link> etc.
<title>
this tag is used inside the <head> tag to write the document title.
<body>
<body> tag represents the document’s body which keeps other HTML tags like <div>, <h1>, <p> etc.
Different Tags of HTML works and their description
The different tags of how HTML works are as explained below:
<h1>
Heading tag use to create varieties of the heading example given below
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>Output
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
<p>
This is a paragraph tag that can be better understood by the example given below.
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>This is a first paragraph of text.</p>
<p>This is a second paragraph of text.</p>
<p>This is a third paragraph of text.</p>
</body>
</html>Output
This is the first paragraph of the text.
This is the second paragraph of the text.
This is the third paragraph of the text.
<br />
This tag is used to break the line; we can use this tag whenever we want anything’s will start from the next line. It is a single line tag that does not require a closing tag.
<center>
Put the whole content into center place this main use of this tag in web page creation.
<hr>
Used for creating the line, mainly used when you want to draw a single line web page.
<pre>
This is a very important tag of HTML; in some scenario, we want to show everything the same as it is written inside the HTML page; in those cases, it is a very useful tag. The example is given below.
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
Laravel is the PHP framework. It is an open source framework used in web application development. This framework is based on model view controller design pattern due to this project developed with help of this framework are more structured and manageable. This framework reuses the existing
</pre>
</body>
</html>Output
Laravel is the PHP framework. It is an open-source framework used in web
application development. This framework is based on model view controller
design pattern due to this project developed with the help of this framework are
more structured and manageable. This framework reuses the existing
To print a single space, this is used in HTML.
Tags Properties
We can set the property at tag level Example given below
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute</title>
</head>
<body>
<p align = "left">Left aligned</p>
<p align = "center">Center aligned</p>
<p align = "right">Right aligned</p>
</body>
</html>Output
Left aligned
Center aligned
Right aligned
Core Attributes of HTML
There are few core attributes which have been used with almost all the HTML element which are following.
- Id
- Title
- Class
- Type
1) Id
This attributes used to uniquely identify the HTML element in the page; it may be possible that the same element has been used in the HTML page at multiple places by the id attribute we identify the element and its content and can be used for another purpose in javascript. The example is given below.
<p id = "html">This is first paragraph which explains what is HTML how to use it</p>
<p id = "css">This it second para which explains what is Cascading Style Sheet and how to use it</p>
Explanation – In the above example, the same element is used two times to differentiate this element only way by the ID.
2) Title
This attribute syntax is similar to the id attributes, the purpose of this attributes will depend upon the element that carries it; although it is often displayed as a tooltip when the cursor comes over the element, this is the main use of this attribute. The example is given below –
<!DOCTYPE html>
<html>
<head>
<title> title Attribute Example</title>
</head>
<body>
<h3 title = "Hello Title Example Test">Sleeping from the long time</h3>
</body>
</html>Output
Sleeping for a long time
If we try to bring our cursor over “Sleeping from a long time”, we will see that whatever title we have used in our code is coming out as a tooltip of the cursor.
3) Class
The class attribute is used to associate an element with a style sheet and specifies the class of element. We will learn more about the use of the class attribute when we will learn Cascading Style Sheet (CSS).Its main use is CSS. Value for this attribute may also be a space-separated list of class names. The example is given below –
class = "className11 className12 className53"
4) Style
It is used to writing the cascading style rule at the element level, which can be better explained by the example given below.
<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style = "font-family:arial; color:#FF0000;">This is style example text , it is red color...</p>
</body>
</html>Output
This is a style example text; it is red color…
Conclusion
As we saw many basics tags, the web page can be created with the help of these tags, which can be displayed to the end-user whenever a user requests the particular web page through his web browser, the work of displaying will be done by the web browser. Today lots of new tags exist into the market to make web pages more attractive.
Recommended Articles
This has been a guide to how HTML works. Here we have discussed the basic concept of HTML by using different tags and core attributes of HTML. You may also look at the following articles to learn more –
