HTML elements

HTML elements are the building blocks of a web page, each serving a specific purpose in structuring and presenting content. In HTML, elements are typically composed of opening and closing tags, with content sandwiched between them.

Here are explanations of some common HTML elements along with examples:

1. Paragraph (<p>):
   • The <p> element is used to define paragraphs of text.
   • Example

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

1. Heading (<h1>, <h2>, …, <h6>):
   • Headings are used to define the hierarchical structure of the document, with <h1> being the highest level and <h6> the lowest.
   • Example:

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

1. Link (<a>):
   • The <a> element is used to create hyperlinks, allowing users to navigate to other web pages.
   • Example:

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

1. Image (<img>):
   • The <img> element is used to embed images in a web page.
   • Example

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

1. List (<ul>, <ol>, <li>):
   • Lists can be unordered (<ul>) or ordered (<ol>), with list items defined by the <li> element.
   • Example:

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

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

1. Table (<table>, <tr>, <th>, <td>):
   • Tables are created using the <table> element, with rows defined by <tr>, header cells by <th>, and data cells by <td>.
   • Example:

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

1. Form (<form>, <input>, <button>):
   • Forms are used to collect user input and can include elements like <input> for text boxes and <button> for submission.
   • Example:

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

1. Header and Footer (<header>, <footer>):
   • Semantic elements like <header> and <footer> help define the structure and meaning of different sections of a page.
   • Example:

<header>
  <h1>Main Header</h1>
</header>

<footer>
  <p>&copy; 2024 Example Company</p>
</footer>

1. Strong and Emphasis (<strong>, <em>):
   • <strong> is used to indicate strong importance, and <em> is used to emphasize text.
   • Example:

<p><strong>This is strong text.</strong></p>
<p><em>This is emphasized text.</em></p>

1. Division (<div>):
   • The <div> element is a generic container that is often used for grouping and styling purposes.
   • Example:

<div>
  <p>This is inside a div.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

Empty HTML elements also known as void elements, are elements that do not have any content between opening and closing tags. Instead, they may include attributes, and they usually don’t require a closing tag. In HTML, these elements are self-closing.

These examples cover some of the fundamental HTML elements. Combining and nesting these elements allows developers to create structured and meaningful web pages.