HTML

HTML Elements

Each element consists of an opening tag, associated content, and an end tag, which contains the designated content for display on the web page. For example, the element <p> represents a paragraph, while <h1> indicates a basic level heading.

Basic HTML Elements

Headings: Headings represent the hierarchical structure of content on a web page, ranging from <h1> (most important) to <h6> (least important).
Paragraphs: Paragraphs enclose the textual content on a web page.
Lists: Lists organize information in an organized or unordered fashion.

Example

<!-- Headings -->
<h1>This is a Heading</h1>
<h2>This is a Heading 2</h2>

<!-- Paragraphas -->
<p>This is a paragraph.</p>
<p>This is 2nd paragraph.</p>

<!-- Unordered Lists -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<!-- Ordered Lists -->
<ol>
  <li>First Item</li>
  <li>Second Item</li>
</ol>

Self Closing Elements

There is no closing tag in Self-closing elements. This is because they have no content. They are empty elements. Following are some examples of self-closing elements.

<img>: Images are embedded in a website page with the <img> element.
<br>: The line break element, <br> is used to add a single line break in content.
<hr>: This horizontal rule element creates a visual separation between content sections.
<input>: To create form input fields, an input element is used.
<meta>: This element contains metadata about the HTML document, such as character encoding.

Example

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

<p>This is a line of text.<br>This is another line of text.</p>

<hr>

<input type="text" name="username">

<meta charset="UTF-8">

Nested Elements

Nested elements in HTML refer to elements that are contained within other elements. This hierarchical structure allows for the structuring of content on a web page.

Example

<div id="outer-div">
    <div id="inner-div">
        <!-- Content goes here -->
    </div>
</div>

In the above example, the inner <div> is nested inside the outer <div>. This nesting allows for grouping related content and applying styles or functionality to the nested elements as a unit.

<table>
    <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
    </tr>
    <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
    </tr>
</table>

Tables in HTML often have nested elements such as <tr> (table rows) and <td> (table data cells) within the <table> element to structure tabular data.