Back To Basics HTML: The P Tag
Tags: html, basics, ptag, learning
Published: 2020-11-28 07:58:20

Welcome to Back to Basics HTML! We all need to be refreshed about the basics. When I think about the basics, I can solve bugs and errors with a new paradigm. 

The humble `<p>` tag is one of the most essential HTML elements that web developers use. When learning HTML, the `<p>` tag is often the first element that is taught. So what can the `<p>` tag do? 

## The Quick Gist
The `<p>` tag is a very basic element. When the browser renders the element, anything in a `<p>` tag is put on a new line. Browsers will add some margin to the rendered element to help visually distinguish the elements. Any whitespace included in the HTML will not render in the browser. *Note:* You can not nest other `<p>` tags inside a `<p>` tag. However, you can add a `<span>` tag inside a `<p>` tag.

## Browser Rendering 
As mentioned earlier, the browser will remove any white space that is included in your HTML file. Lets look at some badly formated HTML:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The </p> Tag</title>
</head>
<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident sunt minima, deleniti                   esse fugiat cum possimus distinctio labore aperiam asperiores, nemo accusamus tempora nihil ullam tenetur. Assumenda recusandae autem quae!</p><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates repudiandae in deleniti, 
        
        
        adipisci modi beatae explicabo eum, tenetur corporis hic iste excepturi. Eligendi rem harum nobis dignissimos delectus corrupti omnis.</p><p>Lorem ipsum dolor 
        
        sit amet consectetur adipisicing elit. Provident sunt minima, deleniti esse fugiat cum possimus distinctio labore aperiam asperiores, nemo accusamus tempora nihil ullam tenetur. Assumenda recusandae autem quae!</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates repudiandae in deleniti, adipisci modi beatae explicabo eum, tenetur corporis hic iste excepturi. Eligendi rem harum nobis         dignissimos 
        
        delectus corrupti omnis.</p>
</body>
</html>
```
Looks ugly right? What happens when this html gets rendered in the browser? Lets take a look.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kwnf5e1tprff5azwax09.png)

Now it looks perfect in the browser. We could even format the above HTML to look great and get the same results. *Note:* Please keep your HTML clean, you and future developers will thank you. 

## Styling 
Styling the `<p>` tag could not be any easier. The `<p>` supports inline styling, as do many HTML elements. When inline styling is applied, you can customize your element! Lets take a look:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The </p> Tag</title>
</head>
<body>
    <p style="background-color: red; color: white;">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam nulla adipisci quos eveniet laudantium nemo aut consectetur voluptate eos. Natus accusantium tempore voluptatum repudiandae architecto incidunt explicabo quo aut vel?</p>
    <p style="font-size: 30px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni aliquid architecto quaerat esse labore. Iusto, incidunt. Repellendus veniam expedita in explicabo, quas sint totam magnam, facilis nostrum quis unde quasi.</p>
    <p style="font-family: cursive;">Lorem ipsum dolor sit amet consectetur adipisicing elit. <span style="background-color: blanchedalmond;">Quos officiis libero officia, sint sit, dicta ea totam at eius nesciunt voluptates repellat neque aspernatur earum esse ipsa consequuntur provident saepe?</span></p>
</body>
</html>
```
Here it is, rendered:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ze2hgnqz2up2l1dpkzuk.png)

Notice how I changed the color, background color, and even the font of the text! Super cool! I even threw in a `<span>` tag to show that you can use it to style a specific section of the `<p>` tag. 

## Block or inline?
Is the `<p>` tag block or inline? The `<p>` tag is a block element, which means that it takes a block of space when the HTML is rendered. When you go to style or position this element, keep in mind that you are working with a box, rather than an element that is inline. The `<span>` tag is an example of an element that is an inline element.