---
title: "HTML – Layouts"
url: https://khanwaseem.com/blog/course/html-layouts
author: "khan Waseem"
published: 2023-09-21
updated: 2023-09-22
topics: ["course", "HTML Tutorial"]
description: "Design effective and user-friendly web layouts with HTML. Explore semantic elements, CSS, responsive design, and accessibility for a great website experience"
---

# HTML – Layouts

HTML provides a variety of layout elements and techniques that web developers can use to structure and organize the content of web pages. These elements and techniques help create visually appealing and well-organized web layouts.

## HTML Layout Elements :

HTML provides a set of layout elements that web developers use to structure the content of web pages effectively. These layout elements help create organized and visually appealing web layouts. Here are some of the key HTML layout elements:

**`1. <div>` Element:** The `<div>` element is a versatile container used to group and structure content. It is often employed with CSS for layout and styling purposes, allowing developers to create sections or divisions within a web page.

```xml
<div id="header">
    <h1>Welcome to My Website</h1>
    <p>Explore and discover amazing content.</p>
</div>Code language: HTML, XML (xml)
```

**Output : **

![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/22160538/image-224.png)

**2. Semantic HTML Elements: **HTML5 introduced semantic elements that provide meaning to the structure of a web page. These include `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, and `<footer>`. They help developers create well-structured, semantically meaningful layouts.

```xml
<header>
    <h1>Website Header</h1>
</header>
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>
<main>
    <article>
        <h2>Article Title</h2>
        <p>Article content...</p>
    </article>
</main>
<footer>
    <p>Footer information</p>
</footer>Code language: HTML, XML (xml)
```

**Output : **

![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/22160606/image-225.png)

**3. **`**<table>**`** Element:** While primarily used for tabular data, the `<table>` element can also be used for creating grid-based layouts. It includes elements like `<tr>` (table row), `<td>` (table data), and `<th>` (table header) for organizing content in rows and columns.

```xml
<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>30</td>
    </tr>
    <tr>
        <td>Alice</td>
        <td>25</td>
    </tr>
</table>Code language: HTML, XML (xml)
```

**Output : **

![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/22160733/image-226.png)

**4. `<ul>` and `<ol>` Elements: **These elements are used for creating unordered (bulleted) and ordered (numbered) lists, respectively. They are often used to structure content like navigation menus.

```xml
<ul>
    <li>Home</li>
    <li>About Us</li>
    <li>Services</li>
    <li>Contact</li>
</ul>Code language: HTML, XML (xml)
```

**Output : **

![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/22160757/image-227.png)

**5. `<dl>` Element:** The `<dl>` (definition list) element is used to create description lists, consisting of terms (defined with `<dt>`) and their descriptions (defined with `<dd>`). It’s useful for glossaries and definitions.

```xml
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>Code language: HTML, XML (xml)
```

**Output : **

![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/22161016/image-228.png)

**6. `<blockquote>` Element: **This element is used to denote block-level quotations or citations. It’s often styled to distinguish quoted content from the rest of the text.

```xml
<blockquote>
    <p>"The only limit to our realization of tomorrow will be our doubts of today." - Franklin D. Roosevelt</p>
</blockquote>Code language: HTML, XML (xml)
```

**Output : **

![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/22161054/image-229.png)

**7. `<iframe>` Element:** The `<iframe>` element is used to embed external content, such as maps or embedded media, within a web page. It allows for the inclusion of content from other websites or services.

```xml
<iframe src="https://www.example.com"></iframe>Code language: HTML, XML (xml)
```

**Output : **

![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/22161132/image-230.png)

**8. `<form>` Element:** While primarily used for creating interactive forms, the `<form>` element can also be employed for structuring sections of a web page. It can be combined with CSS for layout control.

```xml
<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="Submit">
</form>Code language: HTML, XML (xml)
```

**Output : **

![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/22161206/image-231.png)

**9. `<hr>` Element:** The `<hr>` (horizontal rule) element is used to insert a thematic break or divider between sections of content.

```xml
<p>Text above the divider</p>
<hr>
<p>Text below the divider</p>Code language: HTML, XML (xml)
```

**Output : **

![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/22161319/image-232-1024x107.png)

**10. Non-Breaking Space (`&nbsp;`):** While not an HTML element, the non-breaking space entity `**&nbsp;**` is used to create space between elements without allowing the text to wrap to the next line. It’s handy for precise spacing within layouts.

These HTML layout elements, in conjunction with CSS for styling and positioning, empower web developers to create well-structured and visually appealing web pages with clear content organization. The choice of which elements to use depends on the specific design and layout requirements of the website.

### Related posts:

[CSS – Table](https://blog.khanwaseem.com/css-table/)
[CSS – Text](https://blog.khanwaseem.com/css-text/)
[HTML – Tables](https://blog.khanwaseem.com/html-tables/)
[HTML – Formatting](https://blog.khanwaseem.com/html-formatting/)

Powered by [YARPP](https://yarpp.com).