lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

lesson14Title

lesson15Title

lesson16Title

lesson17Title

webLightBasicChapter1Title

webLightBasicChapter2Title

webLightBasicChapter3Title

# HTML Elements

HTML Elements are the building blocks of a webpage, consisting of tags that describe the content and meaning of the HTML.

<br />

## Basic Structure

Most HTML elements are comprised of a start tag, an end tag, and the content in between.

```html title="Basic Structure of an HTML Element"
<starttag>Content of the HTML element</endtag>
```

<br />

## Example of Elements in Use

```html title="The p element representing a paragraph"
<p>Hello there!</p>
```

<br />

## Essential HTML Elements

1. **`<h1> ~ <h6>`**: Heading Elements

   These represent headings and subheadings in a document from h1 to h6. `<h1>` is the highest level and most important heading, while `<h6>` is the least important, lowest level heading.

   ```html title="Heading elements"
   <h1>Main Heading</h1>
   <h2>Subheading</h2>
   <h3>Sub-subheading</h3>
   ```

<br />

2. **`<p> ~ </p>`**: Paragraph Element

   Denotes a paragraph of text, similar to paragraphs in a book.

   ```html title="Paragraph element"
   <p>This is a paragraph tag in HTML.</p>
   ```

<br />

3. **`<a> ~ </a>`**: Anchor (Link) Element

   Short for anchor, this element creates a hyperlink to another website or section within the same webpage.

   ```html title="Anchor element for a link"
   <a href="https://www.example.com">Visit example.com</a>
   ```

<br />

4. **`<img />`**: Image Element

   Embeds an image into the webpage. The img tag is used as a self-closing tag, `<img />`.

   ```html title="Image element"
   <img src="imagepath.jpg" alt="Description of the image" />
   ```

<br />

5. **`<ul>`, `<ol>`, `<li>`**: List Elements

   `<ul>` represents an unordered list, `<ol>` represents an ordered list, and `<li>` represents an item within these lists.

```html title="Unordered list"
<ul>
  <li>Apple</li>
  <li>Carrot</li>
  <li>Banana</li>
</ul>
```

<br />

```html title="Ordered list"
<ol>
  <li>To-do in the morning</li>
  <li>To-do in the afternoon</li>
  <li>To-do before sleep</li>
</ol>
```

<br />

## Parent & Child Elements

HTML elements have a hierarchical relationship consisting of parent and child elements.

<br />

### Parent Element

The parent element is the upper element that contains other HTML elements. The lower elements contained within a parent HTML element are referred to as 'children.'

Example:

```html title="Parent and child elements"

<div>
  
  <p>Hello there!</p>
</div>
```

In the example above, the `<div>` element is the parent of the `<p>` element.

<br />

### Child Element

A child element is an element that resides within a parent element.

A single parent element can have multiple child elements, which can themselves have their own child elements.

Example:

```html title="ul parent element with li child elements"
<ul>
  
  <li>Apple</li>
  
  <li>Banana</li>
  
</ul>
```

In the example above, the `<li>` elements are children of the `<ul>` element.

<br />

## Practice

Follow the emphasized sections in the code to try it yourself.