Flowisetech Flowisetech
Home
Market
Groups
Pages
See More
Groups Pages Market Events Blogs Funding Offers Jobs Courses Study Cycle Movies Games Merits

Our Information Center

 Terms and Conditions Legal & Business Law Agreement Child Safety & Policy Referral Tearms About Us Flowisetech Earning Guide Terms of Use Privacy Policy Help FAQs Community Guidelines Our Purpose Withdrawal Terms Verification Terms Community Policy
1K Views

Comprehensive Guide to HTML Elements

HTML (HyperText Markup Language) is the backbone of web development, providing the structure and layout of web pages. Below is a detailed explanation of all major HTML elements, categorized for better understanding.

1. HTML Document Structure

These elements define the essential structure of an HTML document.

<!DOCTYPE html>

  • Declares the document type and version of HTML (HTML5 in this case).
  • Ensures proper rendering in browsers.

<html>

  • The root element of an HTML document.
  • Contains all other elements.
  • Example: 
    <!DOCTYPE html>
<html lang="en">
</html>

<head>

  • Contains metadata about the document, including title, character set, and linked resources.
  • Does not display content directly.

<meta>

  • Defines metadata such as character encoding, viewport settings, and description.
  • Example: 
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A guide to HTML elements">

<title>

  • Sets the webpage’s title displayed in the browser tab.
  • Example: 
    <title>My First Webpage</title>

<link>

  • Links external resources like stylesheets.
  • Example: 
    <link rel="stylesheet" href="styles.css">

<script>

  • Embeds JavaScript code.
  • Example: 
    <script src="script.js"></script>

2. Text and Content Formatting Elements

<body>

  • Contains all visible content of a webpage.
  • Example: 
    <body>
    <h1>Welcome to My Website</h1>
</body>

<h1> to <h6> (Headings)

  • Define headings from most important (h1) to least (h6).
  • Example: 
    <h1>Main Heading</h1>
<h2>Subheading</h2>

<p> (Paragraph)

  • Defines a block of text.
  • Example: 
    <p>This is a paragraph of text.</p>

<br> (Line Break)

  • Inserts a line break.
  • Example: 
    Line one.<br>Line two.

<hr> (Horizontal Rule)

  • Creates a horizontal line separator.
  • Example: 
    <hr>

<strong> & <b>

  • <strong>: Defines important text (bold, with semantic meaning).
  • <b>: Bold text without semantic importance.
  • Example: 
    <strong>Important text</strong> and <b>just bold text</b>.

<em> & <i>

  • <em>: Emphasized text (italic with semantic meaning).
  • <i>: Italicized text without semantic meaning.
  • Example: 
    <em>Emphasized text</em> and <i>just italic text</i>.

<mark>

  • Highlights text with a background color.
  • Example: 
    <p>This is <mark>highlighted</mark> text.</p>

<small>

  • Displays smaller-sized text.
  • Example: 
    <small>Copyright © 2025</small>

<blockquote>

  • Defines a block of quoted text.
  • Example: 
    <blockquote>“This is a famous quote.”</blockquote>

<cite>

  • Used to cite the title of a work.
  • Example: 
    <cite>The Great Gatsby</cite>

<code>

  • Displays computer code in a monospaced font.
  • Example: 
    <code>print("Hello, World!")</code>

3. Lists and Tables

Ordered List (<ol>)

  • A numbered list.
  • Example: 
    <ol>
    <li>First item</li>
    <li>Second item</li>
</ol>

Unordered List (<ul>)

  • A bulleted list.
  • Example: 
    <ul>
    <li>Item A</li>
    <li>Item B</li>
</ul>

Table (<table>)

  • Defines a table.
  • Example: 
    <table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>25</td>
    </tr>
</table>

4. Forms and Input Elements

<form>

  • Wraps input fields and buttons.
  • Example: 
    <form action="/submit" method="post">
    <input type="text" name="username">
    <button type="submit">Submit</button>
</form>

<input>

  • Accepts user input.
  • Types: text, password, email, checkbox, radio, submit.
  • Example: 
    <input type="email" placeholder="Enter your email">

<textarea>

  • Multi-line text input.
  • Example: 
    <textarea rows="4" cols="50"></textarea>

<button>

  • Clickable button.
  • Example: 
    <button>Click Me</button>

5. Media Elements

<img>

  • Displays an image.
  • Example: 
    <img src="image.jpg" alt="Description">

<audio>

  • Embeds an audio file.
  • Example: 
    <audio controls>
    <source src="sound.mp3" type="audio/mpeg">
</audio>

<video>

  • Embeds a video file.
  • Example: 
    <video controls>
    <source src="video.mp4" type="video/mp4">
</video>

6. Links and Navigation

<a> (Anchor)

  • Creates a hyperlink.
  • Example: 
    <a href="https://example.com">Visit Example</a>

<nav>

  • Represents a navigation section.
  • Example: 
    <nav>
    <a href="#home">Home</a>
    <a href="#about">About</a>
</nav>

7. Semantic Elements

<header>

  • Defines the introductory section.

<section>

  • Groups related content.

<article>

  • Represents self-contained content.

<aside>

  • Sidebar content.

<footer>

  • Defines footer content.

This guide covers the most commonly used HTML elements, ensuring a solid foundation for web development. 

#HTML
Please log in to like, share and comment!
Upgrade to Pro
Choose the Plan That's Right for You
Upgrade
Categories
Read More
Flowisetech Hi , For easy access