HTML Basics

on


HTML (HyperText Markup Language) is the foundation of web development. It structures web pages, defining their content and layout. Whether you're a beginner or revisiting the basics, understanding the most commonly used tags is essential for building effective websites.

What is HTML?

HTML is a markup language used to structure content on the web. It consists of elements written in tags, typically enclosed in angle brackets (< >). These tags create the building blocks of web pages.

Essential HTML Tags

Here are the most commonly used HTML tags, grouped by purpose:

1. Document Structure Tags

  • <html>: Defines the root of an HTML document.

    <html>
    <!-- Content here -->
</html>

  • <head>: Contains metadata and links to resources.

    <head>
    <title>My First HTML Page</title>
</head>

  • <body>: Contains the visible content of the page.

    <body>
    <h1>Welcome!</h1>
</body>

2. Headings and Text Formatting

  • <h1> to <h6>: Headings, <h1> being the largest and <h6> the smallest.

    <h1>Main Heading</h1>
<h2>Subheading</h2>

  • <p>: Paragraphs for text blocks.

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

  • <strong>: Bold text for emphasis.

    <strong>Important!</strong>

  • <em>: Italicized text for emphasis.

    <em>Highlighted text</em>

3. Links and Images

  • <a>: Anchor tag for hyperlinks.

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

  • <img>: Displays images.

    <img src="image.jpg" alt="Description of the image" />

4. Lists

  • Unordered List (<ul>):

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

  • Ordered List (<ol>):

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

5. Tables

  • <table>: Creates a table.
  • <tr>: Table row.
  • <td>: Table data.
  • <th>: Table header.

Example:

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>30</td>
    </tr>
</table>

6. Forms

  • <form>: Defines a form for user input.
  • <input>: Input field for text, numbers, etc.
  • <button>: Button for submitting forms.

Example:

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

7. Multimedia

  • <audio>: Embeds audio.

    <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
</audio>

  • <video>: Embeds video.


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

Tips for Writing HTML

  1. Indentation: Use consistent indentation for readability.
  2. Closing Tags: Always close tags (<p></p>), unless they're self-closing (<img>).
  3. Attributes: Use attributes (e.g., href, src, alt) to define element properties.

Comments

Post a Comment