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.
Lists offer an efficient presentation of organized information. HTML includes both unordered (with bullet points) and ordered (numbered) 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:
HTML, XML1<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.
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:
HTML, XML1<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.
When you need a hierarchical structure, nested lists are handy. For example, a categorized shopping list could utilize nested lists.
Here's how:
HTML, XML1<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.
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:
HTML, XML1<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.
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:
HTML, XML1<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.
Special characters like < or & require HTML entities to display.
<for<>for>&for&°for°©for©
Here's an example:
HTML, XML1<!-- Here we illustrate the usage of the less-than sign --> 2<p>This is a less-than sign: <</p>
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!