Skip to main content

All Important HTML Tags with Examples (Beginner Guide)

HTML has more than 100 tags, but only a few are used in regular web development. This post explains the most commonly used HTML tags, along with simple examples, so beginners can quickly understand how they work.

1. <!DOCTYPE>

Declares the document type as HTML5.

<!DOCTYPE html>

2. <html>

Main container of the entire webpage.

<html> ... </html>

3. <head>

Contains information for the browser, not visible to users.

4. <title>

Defines the page title shown in browser tab.

<title>My Website</title>

5. <body>

Contains all visible content on the webpage.

Text Formatting Tags

6. <h1> to <h6>

Headings from largest (h1) to smallest (h6).

<h1>Main Heading</h1>
<h2>Sub Heading</h2>

7. <p>

Defines a paragraph.

8. <br>

Line break.

9. <b> and <strong>

Bold text. <strong> is more SEO-friendly.

10. <i> and <em>

Italic text. <em> has emphasis meaning for SEO.

11. <u>

Underlined text.

12. <small>

Smaller text.

13. <mark>

Highlights text.

<p>This is <mark>highlighted</mark> text.</p>

14. <blockquote>

Used for quotations.

Links & Images

15. <a>

Creates a hyperlink.

<a href="https://example.com">Visit Website</a>

16. <img>

Displays an image.

<img src="image.jpg" alt="Example">

17. <picture>

Shows images for different screen sizes.

Lists

18. <ul>

Unordered list (bullets).

19. <ol>

Ordered list (numbers).

20. <li>

List item.

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

Tables

21. <table>

22. <tr>

23. <td>

24. <th>

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Aman</td>
    <td>17</td>
  </tr>
</table>

Forms

25. <form>

26. <input>

27. <textarea>

28. <button>

29. <select> and <option>

<form>
  <input type="text" placeholder="Enter name">
  <textarea>Write something...</textarea>
  <button type="submit">Submit</button>
</form>

Media Tags

30. <audio>

31. <video>

32. <source>

<video controls width="300">
  <source src="video.mp4" type="video/mp4">
</video>

Layout & Structure Tags

33. <div>

Block container (most common layout tag).

34. <span>

Inline container.

35. <header>

36. <footer>

37. <section>

38. <article>

39. <nav>

40. <main>

41. <aside>

These were introduced in HTML5 for website layout.

Programming Related Tags

42. <script>

Used to write JavaScript.

43. <style>

Adds CSS directly inside HTML.

44. <link>

Links external CSS or files.

Metadata Tags

45. <meta>

Used for SEO and browser instructions.

Other Useful Tags

46. <hr>

Horizontal line divider.

47. <pre>

Preserves formatting (great for code).

48. <code>

Used for inline code.

49. <kbd>

Keyboard input.

50. <iframe>

Embeds another page or YouTube video.

Complete Mini Example

<!DOCTYPE html>
<html>
<head>
  <title>Example Page</title>
</head>
<body>
  <h1>Welcome!</h1>
  <p>This is a basic HTML page.</p>
</body>
</html>

In the next lesson, we will start creating real HTML pages and mini projects step by step.

Comments

Post a Comment

Popular posts from this blog

HTML Tables Tutorial — Learn Tables with Examples Tables organize tabular data (rows & columns). They are great for schedules, price lists, spec sheets, comparison charts, and any data that fits a grid. This guide covers: Table basics: <table> , <tr> , <td> , <th> Headers, captions, and groups ( <caption> , <thead> , <tbody> , <tfoot> ) Colspan & rowspan Styling and responsive tables Accessibility and best practices Table of Contents Basic Structure Headers & Captions Colspan & Rowspan Grouping Rows: thead / tbody / tfoot Styling Tables Responsive Tables Accessibility Tips Practical Examples Best Practices 1. Basic Structure Minimal valid table: <table> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> </table> Elements: <table> — container for the table <tr> — table ...
Post a Comment
Read more
HTML Forms Tutorial HTML Forms Tutorial HTML Forms allow users to enter and submit data. They are used everywhere—login forms, signup forms, search boxes, feedback forms, etc. In this complete tutorial, you will learn all form elements with examples and demos. 1. What is an HTML Form? A form collects user input using different form elements like text fields, checkboxes, radio buttons, buttons, and more. <form> Form elements go here... </form> 2. Basic Form Structure <form action="#" method="post"> <input type="text" placeholder="Enter name"> <button>Submit</button> </form> Submit Attributes: action → URL where form data is sent method="POST" → Secure data sending method="GET" → Data shows in URL 3. Text Input Field <input type="text" placeholder="Your Name...
Post a Comment
Read more
What is HTML? A Beginner-Friendly Explanation If you want to become a web developer, HTML is the first language you should learn. It is the foundation of every website on the internet. In simple words: HTML (HyperText Markup Language) is used to create the structure and content of a webpage. Why HTML is important? Websites cannot exist without HTML It is simple and beginner-friendly Used with CSS and JavaScript Works on all browsers How does HTML work? HTML is made of tags . Tags tell the browser what type of content is being shown. Example of an HTML tag: <p>This is a paragraph.</p> Here: <p> is the opening tag </p> is the closing tag The text inside is the content Basic HTML Page Example Below is a simple webpage example you can try: <!DOCTYPE html> <html> <head> <title>My First Webpage</title> </head> <body> <h1>Hello World!</h1> <p>This is my...
Post a Comment
Read more