HTML Paragraph styles Formatting And Comments
Paragraph
The HTML <p>
element is used to represent a paragraph of text. It is one of the basic building blocks of HTML and is used to define the content on a web page. Here is an example of a paragraph in HTML:
<p>This is an example of a paragraph in HTML. It can contain text, links, images, and other inline elements. The purpose of a paragraph is to provide structure and meaning to the content on a web page.</p>
In this example, the text “This is an example of a paragraph in HTML.” is contained within the <p>
tags, which define it as a paragraph element. The text within the <p>
tags is displayed as a block of text, with a line break before and after the paragraph.
styles
HTML styles are used to control the appearance of HTML elements on a web page. There are several ways to apply styles in HTML, including:
- Inline styles: Inline styles are specified directly within an HTML element using the
style
attribute. For example:
<p style="color: red;">This is a red paragraph.</p>
- Internal styles: Internal styles are specified within the
<head>
section of an HTML document using the<style>
element. For example:
<head>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>This is a blue paragraph.</p>
<p>This is another blue paragraph.</p>
</body>
- External styles: External styles are specified in a separate CSS (Cascading Style Sheets) file and linked to an HTML document using the
<link>
element in the<head>
section. For example:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>This is a green paragraph.</p>
<p>This is another green paragraph.</p>
</body>
With the external styles, the styles are defined in a separate file style.css
:
p {
color: green;
}
Using external styles is considered best practice because it separates the presentation (style) from the content (HTML) and makes it easier to maintain and update the styles across multiple pages.
Formatting
HTML provides several elements for formatting text, including:
<strong>
– Represents strong emphasis, often displayed as bold text. For example:
<p>This text is <strong>important</strong>.</p>
<em>
– Represents emphasized text, often displayed as italic text. For example:
<p>This text is <em>emphasized</em>.</p>
<u>
– Represents underlined text. For example:
<p>This text is <u>underlined</u>.</p>
<mark>
– Represents marked text, often displayed with a highlighted background color. For example:
<p>This text is <mark>highlighted</mark>.</p>
<del>
– Represents deleted text, often displayed with a strikethrough. For example:
<p>This text is <del>deleted</del>.</p>
<sub>
– Represents subscript text, displayed as small text slightly below the baseline. For example:
<p>This text contains a <sub>subscript</sub>.</p>
<sup>
– Represents superscript text, displayed as small text slightly above the baseline. For example:
<p>This text contains a <sup>superscript</sup>.</p>
These elements can be used in combination with each other and with other HTML elements to create rich and meaningful content on a web page.
Comments
HTML comments are used to add notes and explanations to the HTML code. They are not displayed in the final output of the web page, but they can be useful for documentation purposes, or to temporarily disable parts of the code.
In HTML, comments start with the <!--
tag and end with the -->
tag. Everything between these tags is considered a comment and ignored by the browser.
Here is an example of an HTML comment:
<!-- This is a comment in HTML -->
<p>This is some visible text on the web page.</p>
<!--
<p>This paragraph will not be displayed on the web page, as it is within a comment.</p>
-->
In this example, the first comment is a single-line comment that explains what the comment is for. The second comment contains multiple lines of text and demonstrates how comments can be used to temporarily disable parts of the code.