HTML element

Here's a tutorial on HTML elements:

HTML (Hypertext Markup Language) is the standard markup language used to create web pages. HTML elements are the building blocks of an HTML document, and they define the structure and content of the page.

An HTML element consists of a start tag, content, and an end tag. The start tag begins with the < symbol, followed by the name of the element, and ends with >. The end tag begins with the < symbol, followed by a slash, the name of the element, and ends with >.

Here's an example of an HTML element:

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

In this example, the p element defines a paragraph of text. The start tag is <p>, and the end tag is </p>. The content of the element is "This is a paragraph element."

HTML elements can also have attributes, which provide additional information about the element. Attributes are specified in the start tag of the element, using the format attribute_name="attribute_value". For example:

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

In this example, the a element defines a hyperlink. The href attribute specifies the URL that the hyperlink should link to.

There are many HTML elements that you can use to define different types of content and structure for your web page. Here are some common examples:

  • <h1> - <h6>: These elements define headings of different sizes and importance.
  • <p>: This element defines a paragraph of text.
  • <a>: This element defines a hyperlink.
  • <img>: This element defines an image.
  • <ul>: This element defines an unordered list.
  • <ol>: This element defines an ordered list.
  • <table>: This element defines a table.

By using HTML elements, you can structure your web page in a logical and semantic way, making it easier to read and understand. HTML elements can also be styled using CSS (Cascading Style Sheets) to add visual appeal and improve the user experience.

  1. HTML5 new elements: HTML5 introduced several new semantic elements for better document structure and clarity. Some include <article>, <section>, <nav>, <header>, <footer>, <figure>, <figcaption>, <aside>, and <main>.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HTML5 New Elements</title>
    </head>
    <body>
        <article>
            <h2>Article Title</h2>
            <p>Article content goes here.</p>
        </article>
        <section>
            <h2>Section Title</h2>
            <p>Section content goes here.</p>
        </section>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
        <!-- Other HTML5 semantic elements -->
    </body>
    </html>
    
  2. HTML form elements: HTML form elements are used to create forms for user input. Common form elements include <form>, <input>, <select>, <textarea>, <button>, and others.

    <form action="/submit" method="post">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username">
    
        <label for="password">Password:</label>
        <input type="password" id="password" name="password">
    
        <button type="submit">Submit</button>
    </form>
    
  3. HTML media elements: Media elements handle audio and video content. Examples include <audio> and <video>.

    <audio controls>
        <source src="audio.mp3" type="audio/mp3">
        Your browser does not support the audio element.
    </audio>
    
    <video controls width="400">
        <source src="video.mp4" type="video/mp4">
        Your browser does not support the video element.
    </video>
    
  4. HTML table elements: Table elements are used to create tables. Examples include <table>, <tr> (table row), <td> (table data), <th> (table header), <thead>, <tbody>, and <tfoot>.

    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John</td>
                <td>25</td>
            </tr>
            <tr>
                <td>Jane</td>
                <td>22</td>
            </tr>
        </tbody>
    </table>
    
  5. HTML navigation elements: Navigation elements help in creating navigation menus. Examples include <nav>, <ul>, <li>, and <a>.

    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    
  6. HTML scripting elements: Scripting elements are used to embed scripts, typically JavaScript. Examples include <script>.

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