lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

lesson14Title

lesson15Title

lesson16Title

lesson17Title

webLightBasicChapter1Title

webLightBasicChapter2Title

webLightBasicChapter3Title

# Layout Basics

HTML (HyperText Markup Language) defines the structure and content of web pages, forming the skeleton of a webpage.

Layout refers to the `arrangement` of the structure and information on the page.

<br />

## Reviewing Basic HTML Structure

An HTML document that constitutes a webpage has the following basic structure.

```html title="Basic HTML Structure"
<!DOCTYPE html>
<html>
  <head>
    
    <title>Page Title</title>
  </head>
  <body>
    
  </body>
</html>
```

The `<head>` includes metadata and styles for the document, while the `<body>` contains the content visible to users.

<br />

## Block Elements and Inline Elements

HTML elements are broadly divided into block elements and inline elements.

1. `Block Elements`: Block elements occupy the full width of the screen, and each element starts on a new line. `<div>`, `<h1>`, and `<p>` are examples of block elements.

```html title="HTML Block Elements"
<div>div is a block element</div>
<p>p is a block element</p>
```

<br />

2. `Inline Elements`: Inline elements occupy only the space bounded by the tags, appearing continuously without line breaks. `<span>`, `<a>`, and `<img>` are examples of inline elements.

```html title="HTML Inline Elements"
<span>span is</span> <span>an inline element.</span>
```

<br />

## Containers & Items

A container groups multiple elements together. `<div>` and `<section>` are representative container elements.

```html title="div Container Element"
<div>
  <p>Hello!</p>
  <p>Nice to meet you!</p>
</div>
```

<br />

## Positioning

Positioning refers to adjusting the location of elements. The `position` property can be used to control this.

- `static`: This is the default value for element positioning.

- `relative`: Moves relatively from its normal position.

- `absolute`: Has an absolute position based on its parent element.

- `fixed`: Has a fixed position based on the viewport.

```html title="Positioning"
<div>Basic element</div>
<div style="position: fixed; bottom: 60px; right: 60px;">
  Element with a fixed position relative to the viewport
</div>
```

We will explain positioning in more detail in future lessons 🙂

Generally, the `<head>` tag includes metadata and styles for the document.

### Generally, the `<head>` tag contains content that is visible to the user.

Layout Basics

Reviewing Basic HTML Structure

Block Elements and Inline Elements

Containers & Items

Positioning

Generally, the <head> tag contains content that is visible to the user.

Generally, the `<head>` tag contains content that is visible to the user.