Basic Html Tags
Structure Tags
Text Formatting Tags
Links and Media Tags
List Tags
Table Tags
Form Tags
Division and Styling Tags
Metadata Tags
Structure Tags
<html>: Defines the root of the HTML document.
<head>: Contains metadata, links to stylesheets, and other non-visible content.
<title>: Sets the title of the web page (appears in the browser tab).
<body>: Contains the visible content of the webpage.
• Text Formatting Tags
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Define headings, with <h1> being the
largest and most important.
<p>: Defines a paragraph.
<br>: Inserts a line break.
<strong>: Makes text bold (semantically important).
<em>: Emphasizes text (usually renders as italics).
<u>: Underlines text.
<i>: Italicizes text.
<b>: Makes text bold.
<mark>: Highlights text.
• Links and Media Tags
• <a href="URL">: Defines a hyperlink.
• <img src="image_url" alt="description">: Embeds an image.
• <audio>: Embeds audio content.
• <video>: Embeds video content.
• <iframe src="URL">: Embeds an external webpage within a frame.
• List Tags
• <ul>: Unordered (bulleted) list.
• <ol>: Ordered (numbered) list.
• <li>: List item, used inside <ul> or <ol>.
• Table Tags
• <table>: Defines a table.
• <tr>: Defines a table row.
• <td>: Defines a table cell.
• <th>: Defines a table header cell.
• <thead>, <tbody>, <tfoot>: Define table sections.
• Form Tags
• <form>: Defines an HTML form.
• <input>: Defines an input field.
• <textarea>: Defines a multi-line text input field.
• <button>: Defines a clickable button.
• <label>: Defines a label for form elements.
• <select>: Defines a drop-down menu.
• <option>: Defines an option in a drop-down menu.
• <fieldset>: Groups related elements in a form.
• Division and Styling Tags
• <div>: Defines a section or division in the document.
• <span>: Defines a small section of inline content.
• <style>: Defines CSS styles (usually placed within <head>).
Metadata Tags
<meta>: Provides metadata about the HTML document, such as character set or
viewport settings.
<link>: Defines relationships to external resources (e.g., for linking stylesheets).
<script>: Defines JavaScript or links to an external JavaScript file.
These are just a few basic HTML tags, but they cover the essentials for building a
simple webpage.
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <meta charset="UTF-8">
• <meta name="viewport" content="width=device-width, initial-scale=1.0">
• <title>My Simple Webpage</title>
• </head>
• <body>
•
• <!-- Header Section -->
• <header>
• <h1>Welcome to My Simple Webpage</h1>
• <p>This page showcases some of the basic HTML elements I've learned!</p>
• </header>
• <!-- Unordered List of Hobbies -->
• <section>
• <h2>My Favorite Hobbies</h2>
• <ul>
• <li>Reading Books</li>
• <li>Playing Guitar</li>
• <li>Traveling</li>
• </ul>
• </section>
• <!-- Ordered List of Steps -->
• <section>
• <h2>How to Make a Cup of Tea</h2>
• <ol>
• <li>Boil water</li>
• <li>Place tea bag in a cup</li>
• <li>Pour hot water over the tea bag</li>
• <li>Let it steep for 3-5 minutes</li>
• <li>Remove the tea bag and enjoy!</li>
• </ol>
• </section>
• <!-- Image -->
• <section>
• <h2>Here's a Beautiful Sunset</h2>
• <img src="https://via.placeholder.com/400x200" alt="Placeholder Image of a Sunset">
• </section>
• <!-- Simple Form -->
• <section>
• <h2>Contact Me</h2>
• <form action="#" method="post">
• <label for="name">Your Name:</label>
• <input type="text" id="name" name="name">
• <button type="submit">Submit</button>
• </form>
• </section>
• <!-- Footer Section -->
• <footer>
• <p>Created by Your Name on November 26, 2024</p>
• </footer>
• </body>
• </html>
