Navigation
Discover how to organize text content using headings, paragraphs, and lists to make information easy to read.
What if you could tell a computer exactly how to organize a messy pile of notes into a beautiful, structured webpage in less than 10 seconds?
1. Use `<h1>` for the main title: 'All About Animals'. 2. Use `<h2>` for a major category: 'Domestic Dogs'. 3. Use `<h3>` for a specific breed under that category: 'Golden Retrievers'. 4. If you add a section about 'Care Tips' for that breed, use another `<h3>` or an `<h4>`.
Quick Check
If you are writing a sub-section inside a chapter labeled with an tag, which tag should you use for the sub-section title to maintain hierarchy?
Answer
You should use the tag.
When you have a group of related items, you use lists. There are two main types: Unordered Lists (`<ul>`) and Ordered Lists (`<ol>`). Use `<ul>` when the sequence doesn't matter, like a list of ingredients. These appear with bullet points. Use `<ol>` when the sequence is vital, like the steps in a math problem or a recipe. Regardless of the list type, every single item inside the list must be wrapped in a List Item (`<li>`) tag. For example, a list with items will have sets of `<li>` tags.
To display a recipe, you combine both types: 1. Use `<ul>` for the 'Ingredients' because you can buy them in any order. 2. Inside the `<ul>`, use `<li>` for 'Flour', `<li>` for 'Sugar', etc. 3. Use `<ol>` for the 'Instructions' because you must mix before you bake! 4. Inside the `<ol>`, use `<li>` for 'Step 1', `<li>` for 'Step 2', etc.
Quick Check
Which tag would you use to create a 'Top 5' countdown of your favorite video games?
Answer
The <ol> (Ordered List) tag.
Every HTML element has a default display behavior. Block-level elements (like `<h1>`, `<p>`, and `<div>`) are like bricks. They always start on a new line and take up the full width available ( of the container). Inline elements (like `<a>` for links or `<strong>` for bolding) are like paint on those bricks. They do not start on a new line; they only take up as much width as their content requires and sit side-by-side with other inline elements. Understanding this is the key to controlling your page layout.
Imagine you have this code: 1. `<p>This is a paragraph.</p>` 2. `<strong>Bold Text</strong>` 3. `<a>A Link</a>`
The paragraph will take up its own line. However, the 'Bold Text' and 'A Link' will appear on the same line right next to each other because they are both inline elements.
Which of the following is the correct way to mark up a single item in a list?
If you want to create a list of steps to solve the equation , which list tag is most appropriate?
A <strong> tag is a block-level element and will always start on a new line.
Review Tomorrow
In 24 hours, try to recall the difference between block and inline elements and name three tags for each.
Practice Activity
Create a simple HTML page about your favorite hobby. Use one , two sections, and one ordered list of 'Steps to Get Started'.