lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

webIntroHtmlChapter1Title

webIntroHtmlChapter2Title

webIntroHtmlChapter3Title

webIntroHtmlChapter4Title

# What is a Webpage Layout?

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

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

<br />

## Basic Structure of a Webpage Composed of 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>` includes the document's metadata and styles, while the `<body>` contains the content displayed to the user.

<br />

## Block Elements and Inline Elements

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

1. `Block Elements`: Block elements take up the full width of the parent container and always start on a new line. Elements such as `<div>`, `<h1>`, and `<p>` are block elements.

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

<br />

2. `Inline Elements`: Inline elements only take up as much width as necessary and are displayed consecutively without a line break. Elements such as `<span>`, `<a>`, and `<img>` are inline elements.

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

<br />

## Container & Item

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>
```
 
In the above code, the `<div>` groups the `<p>` elements together.

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

The elements that take up the entire width of the screen are `block elements`.

### `Inline elements` take up the entire width of the screen.

What is a Webpage Layout?

Basic Structure of a Webpage Composed of HTML

Block Elements and Inline Elements

Container & Item

Inline elements take up the entire width of the screen.

`Inline elements` take up the entire width of the screen.