The World Wide Web (WWW) was built by Sir Tim Berners-Lee for one incredibly important thing: exchanging information with many others. Thus it is a save bet that content is the true ? on the Web. But how to structure information on the Web? <p> element to the rescue!

The next task for our in depth freeCodeCamp session on „Basic HTML and HTML5“ is quite straight forward:

Create a p element below your h2 element, and give it the text „Hello Paragraph“.

freeCodeCamp

Remember the previous tasks? First, we head to add a majorly important <h1> headline, then we went on to add cat content with an unbearably difficult <h2> headline. While I make it sound like this is nothing at all, in fact, this is already quite important: if we get the semantics wrong search engines, screen readers and markup junkies will want our head for wasting their time. Yes, I am talking to you, you <div> taggers!

The web being made for the exchange of information and all, let’s dive into the nitty-gritty stuff of the paragraph tag 🙂

The HTML <p> element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields.

MDN web docs

I would like to emphasise the part about „structural grouping of related content“: this means that so called phrasing content should be placed between <p> and </p>. Not more, not less. I know, this sounds quite theoretical – but fear not: if it fits into a sentence, then it is phrasing content. You want to make something bold for example. Does it fit into your sentence? YES IT DOES. Therefore, it is phrasing content. This holds true for images, links and many other things – probably best described in this answer on Stack Overflow.

The <p> element allows tag omission if the opening tag is immediately followed by certain elements (LMGTFY) and includes global attributes – a funky way to provide additional information.

So what about the answer for the freeCodeCamp task? Do not dismay, my friend. If you want to add a paragraph, you simply add:

<p>This is a funky little paragraph</p>
<p>This is a second funky little paragraph</p>

To complete the task at hand we have to add a <p> tag with the asked for content in between so it looks something like this:

<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Hello Paragraph</p>

Summa summarum: this task is about adding a text paragraph to the previous solution. In order to do so, we need to add “Hello Paragraph” as content in between the <p> and </p> tags. This is important because browsers, screen readers and search engines would not know what they are looking at and might wrongly label your content to the disadvantage of your users.