Lesson 2

Structuring and Organizing Web Content with HTML Lists, Tables, and Formatting


Excited about diving deeper into HTML? Our focus today is structuring web content using HTML. In this lesson, we'll explore HTML lists, tables, and formatting tags. These elements organize and clarify your web pages, enhancing the user experience. Let's get started.

Exploring HTML Lists

Lists offer an efficient presentation of organized information. HTML includes both unordered (with bullet points) and ordered (numbered) lists.

Unordered Lists

Often, we use unordered lists for text items of equal importance. The <ul> tag signifies the list, and the <li> tag encloses each item.

Consider this shopping list example:

1<ul> 2 <li>Milk</li> 3 <li>Bread</li> 4 <li>Apples</li> 5</ul>

This code produces a list with bullet points. Each bullet point introduces a new item, signifying an unordered list.

Ordered Lists

When sequence matters, like in instructions, we use ordered lists. The tag for ordered lists is <ol> while <li> is for the list items.

Here's an ordered list example representing a cooking recipe:

1<ol> 2 <li>Mix flour and sugar.</li> 3 <li>Add eggs.</li> 4 <li>Bake for 30 minutes.</li> 5</ol>

Executing this code results in numbered items — a perfect fit for step-by-step instructions.

Nesting Lists

When you need a hierarchical structure, nested lists are handy. For example, a categorized shopping list could utilize nested lists.

Here's how:

1<ul> 2 <li>Fruit 3 <ul> 4 <li>Apples</li> 5 <li>Bananas</li> 6 </ul> 7 </li> 8 <li>Dairy 9 <ul> 10 <li>Milk</li> 11 <li>Cheese</li> 12 </ul> 13 </li> 14</ul>

Each nested <ul> forms subcategories under the main list items.

Understanding HTML Tables

Tables, invaluable for displaying data in a structured manner, simplify the organization and reading of complex data.

In HTML, tables use the <table> tag. The <tr> tag facilities new rows, and <td> is for cells within the rows. Headers use the <th> tag.

Let's construct a student grade table:

1<table> 2 <tr> 3 <th>Student</th> 4 <th>Grade</th> 5 </tr> 6 <tr> 7 <td>John Doe</td> 8 <td>A</td> 9 </tr> 10 <tr> 11 <td>Jane Smith</td> 12 <td>B+</td> 13 </tr> 14</table>

This creates a clear, tabulated display of students and their grades.

Formatting Text with HTML

Webpages often need to display formatted text, perhaps for a heading or to emphasize a word. HTML offers tags to achieve this:

  • <b> makes text bold.
  • <i> italicizes text.
  • <u> underlines text.
  • <s> strikes through text.
  • <br> inserts a line break.
  • <hr> draws a horizontal line.

For example:

1<p><b>Bold</b>, <i>italic</i>, <u>underlined</u>, <s>strikethrough</s> text.</p> 2<hr>

However, <b> and <i> tags are presentational. For a more modern approach, use the <strong> and <em> semantic tags instead.

HTML Entities

Special characters like < or & require HTML entities to display.

  • &lt; for <
  • &gt; for >
  • &amp; for &
  • &deg; for °
  • &copy; for ©

Here's an example:

1<!-- Here we illustrate the usage of the less-than sign --> 2<p>This is a less-than sign: &lt;</p>
Lesson Summary and Practice

Great job! Through this lesson, you've learned to organize and structure HTML content using lists, tables, and formatting. Now's the time to cement this learning through real-life exercises — a critical step toward becoming an efficient web developer. Let's start practicing!

Enjoy this lesson? Now it's time to practice with Cosmo!

Practice is how you turn knowledge into actual skills.