Web pages will often contain a lot of information. In order for readers to quickly find what they want, you may need to break the display into sections that can be easily identified. Each section might have a different style or appearance. In this lesson we're going to learn about useful elements that will help us arrange our page display into neat sections.
Block vs. Inline Elements
In the last chapter, you started learning about some HTML elements like <p> or <strong> that format the visible information on your web page. Some of these elements will automatically add a new line before or after the closing tag, while some don't add any extra spacing at all. These elements are grouped into two categories: "block" and "inline". Both types can contain data, but how they position that data is different.
A block element likes to have firm boundaries. These elements will add new lines before or after the opening and closing tags to make sure the element is displayed on its own line. The text inside a block will be wrapped automatically by the web browser to fit the space available to the block. Block elements can also contain other block elements as well as inline elements, which we describe below. The block elements you have already learned about include paragraphs (<p>), headlines (<h1>, <h2>, etc.) and block quotes (<blockquote>).
ested Block and Inline ElementsAn inline element does not add any space around the data within the element; it will just control how the data is displayed. An inline element can sit inside other block or inline elements. Some of the inline elements you already know are emphasis (<em>), strong (<strong>), citation (<cite>), and line break (<br />).
The key point to remember is that you should never try to add a block element within an inline element! The diagram to the right shows how block elements can contain other blocks or inline elements. Inline elements might contain other inline elements, but they will never contain blocks.
The <div> Element (Division)
The <div> element marks a "division" in your web page. You use <div> elements to create organized structures containing information that you might want to handle differently on your page. So, if you have two or three paragraphs that need to stay together, you could enclose them with <div> tags. Because <div> elements can contain other blocks and create some space, they are considered block elements.
<div>
<p>My first paragraph...</p>
<p>My second paragraph...</p>
</div>
Copy
The <div> element by itself doesn't do much, other than act as a block for spacing. In fact, if you added a <div> around an existing block, you might not see much difference. However, as you will learn later, you can give a <div> an individual name or class, and then adjust how those named elements behave across your entire web site! This behavior is controlled by a separate document called a Cascading Style Sheet (CSS). You'll learn more about CSS in a later chapter, so for now we'll just practice using <div> elements to divide our web page into separate sections.
The <hr> Element (Horizontal Rule)
The <hr> (horizontal rule) is another handy block element that you can use to divide areas of your page. The <hr> element produces a visible horizontal line across the page. The line forms a natural separation between different subjects or areas that may not be closely related. Display the results below to see <hr> in action.
Try It Now
What happens if you remove the <p> tags from around the subject lines? Modify the live example as shown below and then check out the results.
Subject 1
<hr>
Subject 2
Copy
Remember, whitespace in your code is ignored. Without the <p> elements to keep text separated, you might expect "Subject 1" and "Subject 2" to appear on the same line. But, because <hr> is a block element, it will create its own line of separation between them.
Document Flow
A web browser will normally display elements on the web page in the order they are written in the HTML file, from top-to-bottom. This is called the default document flow. So if you have two block elements in your HTML file, they will appear on your web page in the same order, one underneath the other. Similarly, your inline elements will appear from left to right across the page, just like they are found in the HTML file. As you will see later in the course, it's possible to change the normal document flow and position elements in very flexible ways!
The <span> Element
The <span> element can be used to create a certain style for a small section, like making a word within a paragraph a different color. <span> elements are inline tags, so they can go within blocks or other inline tags, but do not create any space themselves.
Like the <div> element, a <span> by itself doesn't really do anything. But you can change how <span> elements display later using Cascading Style Sheets (CSS). For example, you might decide to wrap the first letter of every paragraph in a <span> section. Then later you can use CSS to make that first letter appear in a larger, fancier font like you might see in some books.
<span>A</span> flea and a fly in a flue <br />
Were imprisoned, so what could they do? <br />
Copy
Poem showing different first letterNow, we haven't shown you any of the magic CSS definitions to guide this <span> appearance, but you can see an example to the right of some possible effects. We decided that our <span
1. What are the two most common categories for visible HTML elements?
2. Which element category likes to have firm boundaries?
3. Which element category can contain other similar elements?
4. Which element category does not add any space around the data within the element?
5. Can an inline element contain a block element? Can a block element contain an inline element?
6. What is a <div> element used for on a web page?
7. What is a <span> element used for on a web page? Is this an example of a block element or an inline element?
8. How does the default document flow position your HTML elements on the web page?
1. The two most common categories for visible HTML elements are "block" and "inline" elements.
2. The "block" element category likes to have firm boundaries.
3. The "block" element category can contain other similar elements.
4. The "inline" element category does not add any space around the data within the element.
5. No, an inline element cannot contain a block element. However, a block element can contain an inline element.
6. The <div> element is used to create organized structures on a web page and to divide the page into separate sections.
7. The <span> element is used to create a certain style for a small section of text. It is an example of an inline element.
8. The default document flow positions HTML elements on the web page in the order they are written in the HTML file, from top to bottom.
1. The two most common categories for visible HTML elements are "block" and "inline" elements.
2. The element category that likes to have firm boundaries is the "block" element category.
3. The element category that can contain other similar elements is the "block" element category.
4. The element category that does not add any space around the data within the element is the "inline" element category.
5. No, an inline element cannot contain a block element. However, a block element can contain an inline element.
6. The <div> element is used to create organized structures containing information that you might want to handle differently on your web page. It helps in dividing the page into neat sections.
7. The <span> element is used to create a certain style for a small section, like making a word within a paragraph a different color. <span> elements are inline tags.
8. The default document flow positions HTML elements on the web page in the order they are written in the HTML file, from top-to-bottom. Block elements will appear one underneath the other, and inline elements will appear from left to right across the page.
To answer these questions, we need to refer to the information provided in the text.
1. The two most common categories for visible HTML elements are "block" elements and "inline" elements.
2. The element category that likes to have firm boundaries is the "block" element category.
3. The element category that can contain other similar elements is the "block" element category.
4. The element category that does not add any space around the data within the element is the "inline" element category.
5. No, an inline element cannot contain a block element. However, a block element can contain an inline element.
6. The <div> element is used to mark a "division" or section on a web page. It is used to create organized structures containing information that you might want to handle differently on your page. It is considered a block element.
7. The <span> element is used to create a certain style for a small section of text, such as changing its color or font. It is an example of an inline element.
8. The default document flow positions HTML elements on the web page in the order they are written in the HTML file, from top to bottom. Block elements will appear one underneath the other, and inline elements will appear from left to right across the page.