Grouping Content
The <div> and <span> elements allow you to group together several elements to create
sections or subsections of a page.
1. <div> (Block-Level Element)
Purpose: Used to group block-level elements or content and apply styling or layout changes.
It creates a new block or section in the document flow, meaning it starts on a new line and
takes up the full width available.
Typical Use: Used for larger sections of a webpage, such as grouping together headers,
paragraphs, and other block elements for styling or layout purposes.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
border: 1px solid black;
padding: 10px;
margin: 10px;
}
.header {
font-size: 24px;
font-weight: bold;
}
.content {
font-size: 16px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">Header Section</div>
<div class="content">
This is the content area within the div container.
</div>
</div>
</body>
</html>
Explanation: The <div> with the class container groups the header and content sections. The
container has a border and padding applied, while the header and content classes have their
own styles.
2. <span> (Inline Element)
Purpose: Used to group inline elements or content for styling or manipulation. It does not
create a new line or break the flow of text; it only applies styles to a portion of text or inline
elements.
Typical Use: Used for styling or applying changes to a small section of text within a block-
level element.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<p>This is an example of using the <span class="highlight">span</span> element
to highlight a portion of text.</p>
</body>
</html>
Explanation: The <span> element with the class highlight is used to apply a background color
and bold text to just a portion of the text within the paragraph.
1. Unordered Lists (<ul>)
Purpose: Used for lists where the order of items does not matter. Each list item is typically
marked with a bullet point.
Syntax:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
2. Ordered Lists (<ol>)
Purpose: Used for lists where the order of items is important. Each list item is typically
numbered.
Syntax:
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
6.
7. HTML
HTML––LISTS
TABLES
1. <table>
Description: Defines the table structure.
Example:
<table border="1">
<!-- Table content goes here -->
</table>
2. <tr> (Table Row)
Description: Defines a row within a table.
Example:
<table border="1">
<tr>
<!-- Row content goes here -->
</tr>
</table>
3. <th> (Table Header)
Description: Defines a header cell in a table. Header cells are bold and centered by default.
Example
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</table>
4. <td> (Table Data)
Description: Defines a standard cell (data) in a table.
Example
<table border="1">
<tr>
<td>John</td>
<td>30</td>
</tr>
<tr>
<td>Sarah</td>
<td>25</td>
</tr>
</table>
5. <thead> (Table Head)
Description: Defines a group of header rows. Typically used for grouping headers together.
Example:
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
</table>
6. <tbody> (Table Body)
Description: Defines the body content of the table. Typically contains the main data rows.
Example:
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>30</td>
</tr>
<tr>
<td>Sarah</td>
<td>25</td>
</tr>
</tbody>
</table>
7. <tfoot> (Table Footer)
Description: Defines the footer rows for the table, often used for summaries or totals.
Example:
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>30</td>
</tr>
<tr>
<td>Sarah</td>
<td>25</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>2 People</td>
</tr>
</tfoot>
</table>
8. <caption>
Description: Defines a title or caption for the table, displayed above the table by default.
Example:
<table border="1">
<caption>Person Information</caption>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>30</td>
</tr>
</table>
Explore colspan and rowspan!
