3.1 The <p> Element
Block elements in HTML are used to create structure and organize the content of a webpage. They help break the content into logical blocks and segments. These elements start a new line and take up the entire available width. Let's take a closer look at three commonly used tags: <p>, <div>, and <span>.
The <p> tag
The <p> tag is used to create paragraphs of text. It is a block element: this means that each paragraph starts on a new line and has margins above and below.
Example of usage:
<p>
This is the first paragraph of text. Paragraphs are used to break the text into logical blocks,
enhancing readability.
</p>
<p>This is the second paragraph of text. Each paragraph begins on a new line.</p>
Properties:
- Block element: Starts on a new line and takes up the entire available width.
- Automatic margins: Browsers typically add margins before and after a paragraph.
- Nesting: The
<p>tag cannot contain other block elements.
Styling with CSS:
p {
color: #333;
font-size: 16px;
line-height: 1.5;
margin-bottom: 15px;
}
3.2 The <div> Element
The <div> tag is a versatile block container used for grouping other elements and applying styles to them. It has no built-in styles and is used solely for structuring content.
Example of usage:
<div class="container">
<h2>Block Header</h2>
<p>Some text inside the div block.</p>
</div>
Properties:
- Block element: Starts on a new line and takes up the entire available width
- Versatility: Can contain any other elements, including block and inline
- Styling and scripts: Often used to apply CSS styles and JavaScript scripts
Styling with CSS:
.container {
border: 1px solid #ccc;
padding: 20px;
background-color: #f9f9f9;
}
3.3 The <span> Element
The <span> tag is an inline element and is used to highlight part of the text or other content within block elements. It has no built-in styles and is used to apply CSS styles and JavaScript scripts to specific parts of the text.
Example of usage:
<p>This text contains a highlighted <span class="highlight">word</span> that stands out from the rest.</p>
Properties:
- Inline element: Does not create a new line and only takes up the space it needs
- Flexibility: Used for applying styles to specific parts of text or other elements
- Frequently used with CSS and JavaScript: Helps precisely style or manipulate parts of text
Styling with CSS:
.highlight {
color: red;
font-weight: bold;
}
3.4 Comparison of <div> and <span>
<div>:
- Block element
- Starts with a new line
- Can contain other block and inline elements
- Used for grouping and structuring content
<span>:
- Inline element
- Doesn't break the text flow
- Used for styling individual parts of text
- Often used for highlighting and JavaScript work
Example of combined usage of <div> and <span>:
.article {
border: 1px solid #ddd;
padding: 10px;
}
.keyword {
color: blue;
font-style: italic;
}
<div class="article">
<h2>Article Title</h2>
<p>
This is a paragraph of article text with a key <span class="keyword">word</span> that is highlighted for emphasis.
</p>
</div>
The <p>, <div>, and <span> tags are fundamental building blocks of HTML that allow you to create structured, styled, and interactive web pages. Understanding their features and proper usage helps in creating user-friendly and functional interfaces.
GO TO FULL VERSION