HTML Elements - Comprehensive Guide

HTML Headings

HTML headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading, and <h6> defines the smallest.

<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>

HTML Paragraphs

Paragraphs are defined with the <p> tag. This element is used to display text in a block format.

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

HTML Links

Links are defined with the <a> tag. The href attribute specifies the URL of the page the link goes to.

<a href="https://www.example.com">This is a link</a>

HTML Images

Images are defined with the <img> tag. The src attribute specifies the path to the image, and the alt attribute provides alternative text for accessibility.

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

HTML Lists

There are two types of lists in HTML:

• Ordered List: Uses the <ol> tag for a numbered list.
• Unordered List: Uses the <ul> tag for a bulleted list.

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

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

HTML Tables

Tables are defined with the <table> tag. Inside, you use <tr> for rows, <th> for table headers, and <td> for table data cells.

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

HTML Forms

Forms are defined with the <form> tag. Inside the form, you use various input elements like <input>, <textarea>, and <button>.

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

HTML Semantic Elements

Semantic elements clearly describe their meaning in a human- and machine-readable way. Examples include:

• <header>
• <footer>
• <article>
• <section>
• <aside>
• <nav>

<header>
    <h1>Website Header</h1>
</header>

<footer>
    <p>© 2024 Your Website</p>
</footer>

HTML Multimedia Elements

HTML provides elements for embedding multimedia such as audio and video:

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

<video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

HTML Iframes

The <iframe> element is used to embed another HTML page within the current page.

<iframe src="https://www.example.com" width="600" height="400"></iframe>

HTML Scripts

Scripts can be included in HTML with the <script> tag. It is commonly used to include JavaScript code.

<script>
    console.log('Hello, World!');
</script>