10 HTML Tags Every Developer Must Know

Wafiq AkWafiq Ak
3 min read

If you are a Web developer then knowing the basics of HTML (Hyper Text Markup Language) is not negotiable. HTML is the skeleton, which gives structure to their web pages and provides neat content with user-friendly features. Today we are going to discuss 10 most basic HTML tags, which every developer should know the usage with examples.

  1. <html>

The <html> tag is the root element of an HTML document. That wraps page content.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First Web Page</title>
</head>
<body>
    <!-- Content goes here -->
</body>
</html>
  1. <head>

The <head> tag includes non-display elements like title, meta information such as-the character set and more.

<head>
    <meta charset="UTF-8">
    <title>My Web Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
  1. <title>

The <title> tag is define the title of that web page to appear in browser title bar or tab.

<title>Welcome to My Website</title>
  1. <body>

The <body> tag contains the visible content of the web page, including text, images, links, and other media.

<body>
    <h1>Hello, World!</h1>
    <p>Welcome to my first web page.</p>
</body>
  1. <h1> to <h6>

These tags are used for headings, with <h1> being the highest (most important) level and <h6> being the lowest.

<h1>Main Title</h1>
<h2>Subtitle</h2>
<h3>Section Title</h3>
<h4>Sub Heading 1</h4>
<h5>Sub Heading 2</h5>
<h6>Sub Heading 3</h6>
  1. <p>

The <p> tag is used for paragraphs of text. It automatically adds spacing before and after the text.

<p>This is a paragraph of text.</p>
  1. <a>

The <a> tag creates hyperlinks. The href attribute specifies the URL of the page the link goes to.

<a href="https://www.example.com">Visit Example</a>
  1. <img>

The <img> tag is used to embed images in a web page. The src attribute specifies the image source, while the alt attribute provides alternative text for accessibility.

<img src="image.jpg" alt="Description of the image">
  1. <ul>,<ol> and <li>

These tags are used to create lists. <ul> defines an unordered list (bulleted), while <ol> defines an ordered list (numbered). The <li> tag is used for each list item.

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

<ol>
    <li>First Item</li>
    <li>Second Item</li>
</ol>
  1. <div>

The <div> tag is a container element used to group content for styling or layout purposes. It has no inherent meaning but is useful for organizing sections of a page.

<div class="container">
    <h2>Section Title</h2>
    <p>Some content goes here.</p>
</div>

Every developer needs to understand these ten HTML tags They are, in a nutshell, the basic elements of web pages and make your content structure neat. As you progress in your web-development journey play with these tags and explore their attributes, styles etc.

Play around with this and build your own web pages to experiment with combining these tags. Happy coding!๐Ÿ˜Š

0
Subscribe to my newsletter

Read articles from Wafiq Ak directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Wafiq Ak
Wafiq Ak

Tech enthusiast on a mission to master technology and create innovative solutions ๐Ÿ’ปโœจ. Passionate about coding ๐Ÿ’ป, cybersecurity ๐Ÿ”’, and the future of tech ๐Ÿš€.