Using Layout Elements

Objectives

After completing this lesson, you will be able to:

Use layout elements for organizing content in web pages

Lists

Lists are used to group related contents together in a structured manner to make content easy to read and understand.

Unordered Lists

The <ul> element is used to create an unordered list, which is a list of elements that are not numbered or ordered in any particular way. Each item in the list is represented by a <li> element.

Here is an example.

Code snippet

<ul>
 <li>Fruits</li>
 <li>Water</li>
 <li>Beach</li>
</ul>

Expand

This is the output of the code.

Ordered List

The <ol> element is used to create an ordered list, which is a list of items that are numbered or ordered in some way. Each item in the list is represented by an <li> element. Here's an example:

Code snippet

<ol>
 <li>Fruits</li>
 <li>Water</li>
 <li>Beach</li>
</ol>

Expand

The markup structure is the same as for unordered lists, except that you have to wrap the list items in an <ol> element.

This is the output of the code.

There are other types of list that we would not discuss here.

You can also nest lists within each other by placing one list inside another.

Tables

Introduction

A table is a structured arrangement of information or text organized into rows and columns. Visual links between the headings of each row and column make it easier to interpret the data. It is important to note that HTML tables are specifically intended for tabular data and should be used accordingly.

The <table> element is used to create the table and contains one or more <tr> elements representing the rows of the table. Each row can contain one or more <td> elements that represent the cells of the table. You can also use <th> elements to create header cells for the table.

Here's an example of a simple table.

Code snippet

<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

Expand

The output looks like this :

You can have as many rows as you like in a table; just make sure that the number of cells are the same in each row.

An HTML table has two kinds of cells:

Header cells - contains header information (created with the <th> element)
Data cells - contains data (created with the <td> element)

The text in <th> elements are bold and centered by default.

The text in <td> elements are regular and left-aligned by default.

Table in HTML5

In HTML5, tables are still used to display tabular data. However, the recommended way to create tables in HTML5 is to use the table, thead, tbody, tfoot, tr, th, and td elements. Here's an example of how to create a simple table using HTML5.

Code snippet

<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</tbody>
</table>

Expand

<thead> is an HTML5 table element that is used to group and define the table header content in a table.

<tbody> is an HTML5 table element that is used to group and define the main content of a table

The display of the table has not changed.

Compared to previous iterations of HTML, HTML5 tables offer more versatility, usability, and design alternatives. This allows developers to create more complicated and user-friendly tables on their web pages.

DIV Elements

When designing a web page, the HTML5 <div> element is an important tool for organizing content. It can contain a variety of HTML tags, including text, images, and forms. In addition, the <div> element is commonly used with Cascading Style Sheets (CSS) to expose formatting and positioning on groups of content. Here's an example of how the <div> element can be used to group content and apply CSS styling.

For Example:

Code snippet

<div class="css_style">
 <h2>My Heading</h2> 
<p>Some content.</p>
 <p>More content here.</p> 
</div>

Expand

The <div> element is primarily a container and does not inherently stand for anything. Its main function is to group and organize content, which facilitates the application of styles using class or id attributes.

Next lesson