Science Knowings: HTML Course For Social Media

HTML Paragraphs

HTML Paragraphs

Welcome to HTML Paragraphs! In this session, we'll dive into the <p> tag and other elements that help you format and organize text content on your web pages.

Paragraph Tag (p)

The <p> tag is the most basic way to create a paragraph of text in HTML. It defines a block-level element that contains a single paragraph of content.

Paragraph Attributes

The <p> tag supports several attributes that allow you to control its appearance, such as align (left, right, center), indent, and style.

Nesting Paragraphs

Paragraphs can be nested within other paragraphs to create more complex text structures. This allows you to group related paragraphs and organize your content effectively.

Line Breaks (br)

The <br> tag is used to create a line break within a paragraph without starting a new paragraph. It can be useful for formatting text or creating space between lines.

Line Break Tag (br)

<p>This is a paragraph with a line break.<br>This is the second line.</p>

Output:
This is a paragraph with a line break.
This is the second line.

Horizontal Rule (hr)

The <hr> tag creates a horizontal line across the width of the page. It can be used to separate sections of content or draw attention to important information.

Horizontal Rule Tag (hr)

<hr>

Output:


Blockquote (blockquote)

The <blockquote> tag is used to indicate a block of quoted text. It creates an indented and offset block of text to distinguish it from the rest of the content.

Blockquote Tag (blockquote)

<blockquote>This is a blockquote.</blockquote>

Output:

This is a blockquote.

Preformatted Text (pre)

The <pre> tag is used to create preformatted text that preserves the original formatting, including spaces, tabs, and line breaks. This is useful for displaying code snippets, text files, or any content that needs to maintain its original formatting.

Preformatted Text Tag (pre)

<pre>
    This is preformatted text.
    It preserves spaces and line breaks.
</pre>

Output:

    This is preformatted text.
    It preserves spaces and line breaks.

Example of Preformatted Text

Preformatted text can be useful for displaying code snippets, like this:

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet('Alice'); // Output: Hello, Alice!

Code (code)

The <code> tag is used to highlight inline code or computer code within a paragraph. It creates a monospaced font and adds a light gray background to the text.

Code Tag (code)

<p>This is inline code: <code>console.log('Hello')</code>.</p>

Output:

This is inline code: console.log('Hello').

Example of Code

Code tags can be used to highlight specific commands, keywords, or code snippets, like this:

<button onclick="greet('Alice')">Click me!</button>

Next Topic: HTML Links

In the next session, we'll explore HTML Links, which allow you to create links to other web pages or resources. Links are essential for navigation and connecting different parts of your website. Follow us to learn more!