DEV Community

loading...
Cover image for Back To Basics HTML: The P Tag

Back To Basics HTML: The P Tag

cdthomp1 profile image Cameron Thompson Updated on ・3 min read

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:

<!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>
Enter fullscreen mode Exit fullscreen mode

Looks ugly right? What happens when this html gets rendered in the browser? Lets take a look.

Alt Text

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:

<!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>
Enter fullscreen mode Exit fullscreen mode

Here it is, rendered:

Alt Text

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.

Discussion

pic
Editor guide