Therichpost

List of common HTML tags with examples

·

,
therichpost Avatar
therichpost
List of common HTML tags with examples

Hello guys how are you? Welcome back to my blog. Today in this blog post I am going to tell All the Attributes of html page with description and uses.

HTML tags are the building blocks of HTML used to create and structure web pages. Here’s a list of common HTML tags with examples:

1. <html>

Defines the root of an HTML document.

<html>
  <head></head>
  <body></body>
</html>

2. <head>

Contains metadata/information for the document.

<head>
  <title>Page Title</title>
</head>

3. <title>

Defines the title of the document, shown in the browser’s title bar or tab.

<title>My Web Page</title>

4. <meta>

Defines metadata about an HTML document.

<meta charset="UTF-8">

5. <link>

Defines the relationship between a document and an external resource.

<link rel="stylesheet" href="styles.css">

6. <style>

Defines internal CSS styles.

<style>
  body { font-family: Arial, sans-serif; }
</style>

7. <script>

Defines a client-side script.

<script>
  alert('Hello, world!');
</script>

8. <body>

Defines the document’s body, containing all the content.

<body>
  <h1>Welcome to My Website</h1>
</body>

9. <h1> to <h6>

Defines HTML headings.

<h1>This is a heading 1</h1>
<h2>This is a heading 2</h2>

10. <p>

Defines a paragraph.

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

11. <a>

Defines a hyperlink.

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

12. <img>

Embeds an image in the document.

<img src="image.jpg" alt="A beautiful scenery">

13. <ul>

Defines an unordered (bulleted) list.

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

14. <ol>

Defines an ordered (numbered) list.

<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>

15. <li>

Defines a list item.

<ul>
  <li>List item</li>
</ul>

16. <div>

Defines a division or section in a document.

<div class="container">
  <p>This is a section.</p>
</div>

17. <span>

Defines a section in a document, used for grouping inline elements.

<p>This is a <span style="color: red;">red</span> word.</p>

18. <table>

Defines a table.

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

19. <tr>

Defines a row in a table.

<tr>
  <td>Row 1, Cell 1</td>
  <td>Row 1, Cell 2</td>
</tr>

20. <th>

Defines a header cell in a table.

<th>Table Header</th>

21. <td>

Defines a cell in a table.

<td>Table data</td>

22. <form>

Defines an HTML form for user input.

<form action="/submit_form" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <input type="submit" value="Submit">
</form>

23. <input>

Defines an input control.

<input type="text" name="username">

24. <label>

Defines a label for an <input> element.

<label for="email">Email:</label>
<input type="email" id="email" name="email">

25. <textarea>

Defines a multi-line text input control.

<textarea name="message" rows="4" cols="50"></textarea>

26. <button>

Defines a clickable button.

<button type="button">Click Me!</button>

27. <select>

Defines a drop-down list.

<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>

28. <option>

Defines an option in a drop-down list.

<option value="fiat">Fiat</option>

29. <header>

Defines a header for a document or section.

<header>
  <h1>Site Title</h1>
</header>

30. <footer>

Defines a footer for a document or section.

<footer>
  <p>&copy; 2024 My Website</p>
</footer>

31. <nav>

Defines navigation links.

<nav>
  <a href="/home">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

32. <article>

Defines an independent, self-contained content.

<article>
  <h2>Article Title</h2>
  <p>This is an article.</p>
</article>

33. <section>

Defines a section in a document.

<section>
  <h2>Section Title</h2>
  <p>This is a section.</p>
</section>

34. <aside>

Defines content aside from the main content.

<aside>
  <h2>Related Content</h2>
  <p>This is an aside.</p>
</aside>

35. <main>

Specifies the main content of a document.

<main>
  <h1>Main Content</h1>
  <p>This is the main content of the page.</p>
</main>

36. <figure>

Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

<figure>
  <img src="image.jpg" alt="A scenic view">
  <figcaption>A scenic view.</figcaption>
</figure>

37. <figcaption>

Defines a caption for a <figure> element.

<figcaption>Figure caption goes here.</figcaption>

38. <blockquote>

Defines a section that is quoted from another source.

<blockquote cite="http://www.example.com">
  This is a blockquote from an external source.
</blockquote>

39. <code>

Defines a piece of computer code.

<code>console.log('Hello, world!');</code>

40. <pre>

Defines preformatted text.

<pre>
  Text in a pre element
  is displayed in a fixed-width
  font, and it preserves
  both      spaces and
  line breaks.
</pre>

These tags cover a wide range of functionalities necessary for building a structured and interactive web page.

Thanks

Other Posts