HTML Elements

HTML elements are the building blocks of HTML documents. They are used to structure and format the content on a webpage, and they are defined by tags that surround the content.

There are many different types of HTML elements, including headings, paragraphs, lists, tables, forms, and images. Each element serves a specific purpose and can be customized with attributes to control its appearance and behaviour.

  • <p>: This element is used to define a paragraph of text.

      <p>This is a paragraph.</p>
      <p>This is another paragraph.</p>
    
  • <h1>: This element is used to define a heading. There are six levels of headings, ranging from <h1> (the largest) to <h6> (the smallest).

      <h1>This is a level 1 heading</h1>
      <h2>This is a level 2 heading</h2>
      <h3>This is a level 3 heading</h3>
    
  • <a>: This element is used to create a hyperlink to another webpage or a specific location on the same webpage. The href attribute is used to specify the destination of the link.

      <a href="https://www.example.com">Click here to visit example.com</a>
    
  • <img>: This element is used to insert an image into a webpage. The src attribute is used to specify the location of the image file.

      <img src="./images/img.jpg" alt="alternative-text">
    
  • The <ul> tag stands for "unordered list" and is used to create a list of items that are not numbered. The <ol> tag stands for "ordered list" and is used to create a list of items that are numbered. The list items are denoted by the <li> tag, and they are usually displayed with a bullet point.

      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
      <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ol>
    
  • <div>: This element is used to create a container for other elements.

      <div>
        <p>This paragraph is inside a div element.</p>
        <ul>
          <li>List item 1</li>
          <li>List item 2</li>
        </ul>
      </div>
    

HTML elements can also be nested, meaning that one element can be placed inside another element. For example, an unordered list element can contain list item elements, which in turn can contain other elements, such as links or images.

  • The <table> element is used to define a table, and the <tr> element is used to define a row. The <td> element is used to define a cell in the table, and the <th> element is used to define a table header cell.

      <table>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
        </tr>
        <tr>
          <td>Row 1, Cell 1</td>
          <td>Row 1, Cell 2</td>
        </tr>
        <tr>
          <td>Row 2, Cell 1</td>
          <td>Row 2, Cell 2</td>
        </tr>
      </table>
    
  • Forms are used to collect user input, such as names, addresses, and email addresses. Forms are defined by the <form> tag and are made up of form elements, such as text fields, buttons, and checkboxes. Forms are an important part of many websites and are used for a variety of purposes, including registration, login, and data collection.