25 Basic HTML Tags Every Beginner Should Know (with Examples)

by

If you are beginning your journey in front-end web development or creating a blog with WordPress, understanding the fundamentals of HTML (Hyper Text Markup Language) is essential. HTML serves as the backbone of every web page, providing structure to the content.

📌 What is an HTML Tag?

HTML tags are the building blocks of web pages. They are enclosed in angle brackets, such as <tag> and typically appear in pairs: an opening tag and a closing tag.

<p>This is a paragraph.</p>

🔤 25 Basic HTML Tags You Should Know

<!DOCTYPE> – Defines the HTML version
<!DOCTYPE html>

<html> – Root element of an HTML document

<head> – Contains meta info like title, links, etc.

<title> – Sets the title of the webpage

<meta> – For SEO and browser info (e.g., charset, viewport)

<link> – Links external CSS file

Below example of HTML5 boilerplate. You can either say HTML5 Blank template.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>YOUR WEBPAGE TITLE HERE</title>
	<link rel="stylesheet" href="YOUR EXTERNAL STYLESHEET FILE PATH HERE">
</head>
<body>
	
</body>
</html>

<style> – Adds internal CSS. It should be added in the ‘head tag’.

<head>
	<style type="text/css">
		p {
			color: red;
			background-color: yellowgreen;
		}		
	</style>
</head>

<body>
	<p>This is a Paragraph.</p>
</body>

<script> – Adds JavaScript to the page. Preferably added after <body> tag or in <head> tag.

<script type="text/javascript">
	document.write("<p>Hello Everyone</p>");
</script>

<body> – All main content of the web page comes inside this tag

<h1> to <h6> – Headings from largest to smallest

<p> – Paragraph tag

<a> – Anchor/link tag

<code><a href="https://example.com">Example</a></code>

<img> – Displays an image

<code><img src="image.jpg" alt="Description"></code>

<br> – Line break

<hr> – Horizontal rule/divider

<ul> – Unordered list

<ol> – Ordered list

<li> – List item

<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

<ol>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ol>

<div> – Division/container

<span> – Inline container for text styling

<div>
<p>Lorem <strong><span style="color: red;">ipsum dolor sit</span></strong> amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<strong> – Bold important text. Inline text styling tag.

<em> – Emphasized (italic) text. Inline text styling tag.

<form> – Creates a form structure

<fieldset> – Groups related elements in a form and draws a box around them.

<legend> – Caption for the fieldset. Used to give the title to a form.

<input> – Input field in forms

<form>
		<fieldset>
			<legend>HTML5 Advanced form Attributes</legend>
			Name: <input type="text" name="">
		</fieldset>
</form>

<button> – Clickable button

<button> <a href="YOUR LINK">Submit</a> </button>

Always Use Proper Nesting

Make sure you properly nest tags inside one another to avoid layout issues.

<div>
	<p>Hello <strong>World.</strong></p>
</div>

👨‍💻 Try It Yourself

Want to test these tags? Use free tools like:

Final Words

These 25 HTML tags are enough to help you start creating basic pages, posts, and even editing WordPress blocks using the “Code” view.

As you move forward, try combining these tags with CSS and JavaScript to build interactive websites.

Also Read: 25 Basic CSS Properties for Beginners

💬 Got questions or want more beginner tutorials? Drop a comment below or explore more on this blog.

Sharing Is Caring:

Leave a Comment