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>
Looks ugly right? What happens when this html gets rendered in the browser? Lets take a look.
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>
Here it is, rendered:
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.
Top comments (0)