HTML Paragraph Tag
Once you have your headings set up, you are going to need to actually write some content! To create well-structured text in your HTML document, the <p> tag is your best friend.
The <p> Tag: Defining a Paragraph
The <p> tag is used to format text into distinct paragraphs. Whenever I (Himanshu) am writing blog posts or creating about sections, this is the tag I reach for the most.
The browser automatically adds some margin (empty space) above and below each paragraph element, providing a clear visual separation between blocks of text.
<p>
Hey there, I am Himanshu Dubey. I am passionate about creating modern, fast, and accessible web experiences. Welcome to my personal site!
</p>
<p>
When I am not coding, you can probably find me exploring new tech or refining my tutorials.
</p>
Attributes and Styling
While the <p> tag is straightforward, you can enhance it by adding attributes like class or id so you can style it later with CSS.
<p class="intro-text" style="color: gray;">
This paragraph has a custom class and some inline styling applied to it.
</p>
Best Practices
A quick tip from me: stick to using the <p> tag strictly for textual content, not for pushing elements around or creating layout spacing. If you need to manage the layout, you should rely on CSS and semantic HTML5 tags like <section> or <article>. We'll explore those more advanced layout techniques as we continue this journey!
💡 Himubey Tip
Never use multiple empty <p></p> tags just to add space between elements on your page! This is a classic beginner mistake. Always use CSS margin or padding properties to control the spacing in your layouts.
Interview Questions
- Does the
<p>tag naturally come with any default styling from the browser? - Why is it important to use
<p>tags for text rather than just wrapping text in a<div>? - What is the correct way to add spacing between two paragraphs?