lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

webIntroHtmlChapter1Title

webIntroHtmlChapter2Title

webIntroHtmlChapter3Title

webIntroHtmlChapter4Title

# What is Layout in a Web Page?

HTML is a language used to define the structure and content of a web page, serving as the skeleton of the webpage.

`Layout` refers to the `arrangement` of a page's structure and information.

<br />

## Basic Structure of a Web Page with HTML

An HTML document that makes up 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>` section includes the document's metadata and styles, while the `<body>` contains the content visible to users.

<br />

## Block Elements and Inline Elements

HTML elements are primarily categorized into `Block` elements and `Inline` elements.

1. `Block Elements`: Block elements occupy the full width of the screen and begin on new lines. `<div>`, `<h1>`, `<p>`, etc., are examples of block elements.

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

2. `Inline Elements`: Inline elements take up only as much width as the content itself and are displayed consecutively without line breaks. `<span>`, `<a>`, `<img>`, etc., 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 into one unit. `<div>` and `<section>` are representative container elements.

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

In the code above, the `<div>` groups the `<p>` elements into a single unit.

Here, the `<div>` acts as a `Container`, and the `<p>` elements serve as `Items`.

Elements that occupy the full width of the screen are `block elements`.

### `Inline elements` are elements that occupy the full width of the screen.

What is Layout in a Web Page?

Basic Structure of a Web Page with HTML

Block Elements and Inline Elements

Containers & Items

Inline elements are elements that occupy the full width of the screen.

`Inline elements` are elements that occupy the full width of the screen.