Div or P elements? What are the most appropriate elements to use and why?
Published: 2023-11-15 20:10:51

This blog is intended for beginners like myself, so if you’re an experienced coder who’s reading this and thinking: “yeah, no kidding pal”, then keep scrolling because we’re still leveling up. 

During the 2nd week of my coding bootcamp, I came to a mental halt when I was tasked with creating the structure of my HTML file. I started to type div but realized the content within this element is technically a paragraph. So does that mean I should use the p tag instead? I tried both, and each displayed the text exactly the same. I learned that both are considered block level elements which means the browser will render them in the same way. I was told it's up to the developer to pick the tag which best describes the content it will contain. But in case you already forgot, I'm barely 3 weeks into learning how to code, so how am I supposed to know better??? 

For that reason, I decided to scavenge the internet and create my own best practices for when to use which tag and why. I’ll define a few HTML elements that I see most commonly or find interesting, then share my best practice on using them moving forward. I plan on adding onto this list throughout my coding journey, so please be patient! Additionally, feel free to share your own best practices in the comments.

FYI: HTML tags are used to hold the HTML element. The p and div are considered elements, and these <> icons are considered tags. All of the content that goes in between the opening <> and closing </> tags are considered part of the element. If this is confusing, I would suggest looking up the difference in Stack Overflow (www.stackoverflow.com). 

div and p

First, I want to provide clarification on my initial confusion between p and div. Both elements are semantic, which means they describe the content within the opening <> and closing </> of the tag. The div describes a section of some portion of an html page. It usually contains different kinds of content that is related to other divs in some way. The p tag operates similarly, however a key difference is that the p element inserts a new paragraph and allows you to put a space in between two consecutive images or videos, whereas the div element doesn’t have that ability. 

Connor’s best practice: Use div to divide my code into sections, and use p to represent text related content such as paragraphs. Example:

<div id="first-story">
  	 	<p id="story-content"> Content of my story goes here</p>
</div>


link and a

This is another situation where at a glance, both elements seem similar but have very different applications.
The link tag is used to link external resources, such as style.css, to your HTML website. It is not visible content on the page. It is considered an empty element so it DOES NOT require an ending </> tag. Example: 

<link rel="stylesheet" type="text/css" href="style.css" />

The a (anchor) tag is used to create a hyperlink on your website. The link IS visible and users can interact with it. It is not an empty element, which means it can contain other elements and it DOES require an ending </> tag. Example: 

<a “wesbite"> Click here for website .../a>

Connor’s best practice: Use link for whenever I want to include style.css to my website. Use a to set a hyperlink to another website that a user can click on. Reminder: both require the href attribute!

br

The br tag represents a single line break inside your p tag. It’s intended to move any text following the br tag down 1 line. It is an empty tag which means it doesn’t require an end </> tag. Keep in mind, a line break IS NOT a space. Example:

	<p> One fish <br> Two fish <br> Red fish <br> Blue fish

Connor’s best practice: Use br when I’m creating bullet points or creating a list without having to use the li elements. I’ll share more about this element later.