Theory
Theory

The p tag for paragraphs

You can create the basic structure for the text using headings. The finer structure can be specified using paragraphs. The tag <p> (which stands for “paragraph”) is used to mark up paragraphs.

By default, browsers display paragraphs separated from the rest of the content by top and bottom margins (but you can over-ride this with CSS). So, if you need to separate one block of text from another, the right decision would be to enclose them in <p> tags.

<p>A paragraph about how I decided to become a coder</p>
<p>A paragraph about my instructor</p>
<p>A paragraph about my blog</p>

Let’s now mark up the introductory text on our main webpage using paragraphs.

A paragraph is a segment of writing consisting of one or several sentences, which are often connected by a common theme. This is a typical natural language definition. An HTML paragraph is something that is completely different.

HTML paragraphs are just an unbroken sequence of phrasal elements. In other words, they are purely structural and do not convey semantic information. Paragraphs can even exist without needing to be enclosed by <p> tags.

Rather, the <p> tag allows us simply to explicitly specify paragraphs that group together elements with phrasal content. These paragraphs can consist not just of blocks of text, but also images, links or input fields, for example.

Not all tags can be nested within <p>. For example, major structural tags, headings, forms, lists and tables cannot be placed inside a paragraph. When your browser encounters an inappropriate tag inside <p>, it will automatically close the <p>, then display the inappropriate tag, followed by the remainder of the paragraph but without a surrounding tag, and then it will insert an empty <p> before the </p> that you wrote.

index.html

HTML

<!DOCTYPE html> <html lang="en"> <head> <title>The website of a beginning coder</title> <link rel="stylesheet" href="outlines.css"> </head> <body> <header> <h1>The website of a beginning coder</h1> </header> <main> <nav> Navigation </nav> <section> Greetings to everyone! Welcome to my first site. Up until just recently I had no idea what a coder does for a living, but now I have found interactive courses in HTML and CSS and I have set myself the goal of becoming one. I even was assigned an instructor, Muffin, who does not allow me to slack off and will track my progress. My first assignment is to keep a diary and honestly write about all of my accomplishments. </section> <section> Skills section </section> </main> <footer> Website footer </footer> </body> </html>

Goalscompleted

Break the text in the first “section” into two paragraphs.

The first paragraph should consist of the text that starts with the phrase Greetings to everyone! and ends with the words my progress,
and the second paragraph should consist of the remaining part of the sentence that has not yet been marked up: My first assignment … accomplishments.

The p tag for paragraphs

Log in

Sign up

Restore access