| Introduction to HTML |
|---|
| Introduction to HTML |
|---|
| HTML Attributes |
|---|
| HTML5 Semantic Elements |
|---|
| HTML Graphics |
|---|
HTML paragraphs are fundamental building blocks for displaying text content on a web page. They are defined using the <p> tag and are used to group sentences and sections of text together.
Basic Example
Here is a simple example of how a paragraph is used in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Paragraph Example</title>
</head>
<body>
<p>This is a simple paragraph.</p>
</body>
</html>
In this example, the text “This is a simple paragraph.” is enclosed within ‘<p>‘ tags, creating a paragraph on the web page.
Attributes of Paragraphs
Paragraphs can also include various attributes to add styles or identify elements for scripting. Here are some common attributes:
- ‘
id‘ Attribute: Used to uniquely identify an element. - ‘
class‘ Attribute: Used to apply CSS styles to elements. - ‘
style‘ Attribute: Used to apply inline CSS styles. - ‘
title‘ Attribute: Provides additional information about the element.
Example with Attributes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paragraph Attributes Example</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="intro" class="highlight" style="color: blue;" title="Introduction paragraph">This is a paragraph with multiple attributes.</p>
</body>
</html>
- The
idattribute is set to “intro”. - The
classattribute is set to “highlight”, applying a background color of yellow via CSS. - The
styleattribute directly applies a blue text color. - The
titleattribute provides a tooltip that says “Introduction paragraph” when the mouse hovers over the paragraph.
Nested Elements
- Paragraphs can contain other inline elements such as
<a>,<span>,<strong>, and<em>.
Example with Nested Elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nested Elements Example</title>
</head>
<body>
<p>This is a paragraph with <strong>bold</strong>, <em>italic</em>, and <a href="#">a link</a> elements.</p>
</body>
</html>
- A
<strong>tag to make the text “bold”. - An
<em>tag to italicize the text “italic”. - An
<a>tag to create a hyperlink around the text “a link”.
Multiline Paragraphs
In HTML, line breaks within the source code do not affect the rendering of paragraphs. To insert a line break, you use the <br> tag.
Example with Line Breaks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Line Breaks Example</title>
</head>
<body>
<p>This is a paragraph with a line break.<br>Here is the text after the line break.</p>
</body>
</html>
In this example, the <br> tag creates a line break within the paragraph, so the text “Here is the text after the line break.” starts on a new line.
Multiline Paragraphs
Paragraphs should be used for blocks of text that represent a distinct section of content. They improve the readability and structure of HTML documents.
HTML paragraphs are essential for structuring text content on web pages. By using attributes and nested elements, you can enhance the appearance and functionality of paragraphs to suit various needs.
