Basic HTML tags are the foundation of every web page. HTML (HyperText Markup Language) uses a set of predefined tags to structure content such as headings, paragraphs, images, links, and lists. Understanding these tags is essential for beginners who want to create or design websites. Each HTML tag has a specific purpose and helps browsers display content correctly. Learning basic HTML tags is the first step toward becoming a web developer.
Basic Html Tags
HTML tags are the fundamental elements of the HTML which define the structure of the documents. These HTML tags are enclosed by angle brackets (< and >). The tags are two types: container tags and empty tags. Most of the tags are container tags; container tags have both an open tag and a close tag. For example, <p> and </p> Some tags are empty tags; empty tags do not have a closing tag. example, <img src=””>, <br> etc.
1. Heading Tags
The heading tags are used to define the heading of the document. There are 6 different types of heading tags that can be used in HTML. The heading tags start from <h1> to <h6> <h1> is the biggest heading, and <h6> is the smallest heading in HTML.
<!DOCTYPE html>
<html>
<head>
<title>Heading Tags Example</title>
</head>
<body>
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
</body>
</html>2. Paragraph Tag
The paragraph tag (<p>)helps the text to be written in a paragraph. Every paragraph should be written between the paragraph opening tag <p> and the paragraph closing tag </p>.
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>This is my first paragraph in HTML.</p>
<p>Here is another paragraph with more text.</p>
</body>
</html>3. Break tag
The break tag <break> is used to break the text to the new line. It focuses on breaking the line and putting the text on the new line. A break tag is an empty tag, meaning the tag does not have a close tag.
<!DOCTYPE html>
<html>
<head>
<title>Break Tag Example</title>
</head>
<body>
<p>
This is the first line.<br>
This is the second line after a break.<br>
And this is the third line.
</p>
</body>
</html>4. Centre Tag
In HTML, the centre tag is used to align the content to the centre of the web page. To align the text centre, you can use <centre> HTML tag.
5. Horizontal Rule
The <hr> tag is an empty tag used for inserting a horizontal line across the page. It is basically used to separate the sections of the content.
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Rule Example</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is the first section.</p>
<hr>
<p>This is the second section, separated by a horizontal line.</p>
</body>
</html>6. Preserve Formatting
The <pre> tag is used to preserve the format used in the content. If you want to display the content in the same format, you can use <pre> tag. The <pre> tag supports the line break and indentation also.
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
This text keeps its spacing.
Indented line stays indented.
Line breaks
are preserved too.
</pre>
</body>
</html>7. Listing Tag
The <ul> and <ol> tags are used to create unordered and ordered listings, and they can display list items using <the li> tag.
<!DOCTYPE html>
<html>
<head>
<title>Unordered List Example</title>
</head>
<body>
<h2>Shopping List</h2>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Eggs</li>
</ul>
</body>
</html>8. Marquee tag
The <MARQUEE> tag is used for making text scroll across the screen. Nowadays, it is not recommended in modern HTML files. Instead of <the marquee> tag, modern programmers use CSS to make the animation or scrolling or moving text effects.
<!DOCTYPE html>
<html>
<head>
<title>Marquee Example</title>
</head>
<body>
<marquee>Scrolling text goes here</marquee>
</body>
</html>Disclaimer: We have provide you with the accurate handout of “Basic Html Tags“. If you feel that there is any error or mistake, please contact me at anuraganand2017@gmail.com. The above study material present on our websites is for education purpose, not our copyrights.
Images and content shown above are the property of individual organisations and are used here for reference purposes only. To make it easy to understand, some of the content and images are generated by AI and cross-checked by the teachers.