Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
shakilsultanali
3,113 PointsConfused about correct practice now on using <p> tag in HTML for content
I am not sure whether this particular question has been asked before or not....
I have seen in several tutorial videos as well as in various sites.......now a days developers just don't use "p" tag for content....like in WordPress you see too that all content has no tags defined.....is it the right way? I am confused how to handle this because I have a habit of defining all content under "p" tag other than headings.
I have also noticed that if you don't use "p" tag and just write down the content....the browser will automatically mark it as "p" element but some WYSIWYG editors are very bad at it....they mess up the formatting.
4 Answers
Ben Myhre
28,726 PointsAll content should have some kind of semantic tag that surrounds it. Whether it is an heading 1-6, a paragraph, a list or WHATEVER... it should have a tag around it that is appropriate for what it means. If you are watching tutorials that suggest you should not have semantically accurate tags, most likely you should be finding new tutorials.
And in WP, I would guess that if you are using the WYSIWYG, it DOES have tags around it, it just puts them around it for you. And WYSIWYGS are notorious for messing up things, as they have to try and guess what your intent is..
Ben Myhre
28,726 Pointsmaybe the standard has changed etc that every text without any element defined is considered p so no need to mark it in code.
Nope... that is just terrible practice.
In terms of CSS for pages where the front end devs systematically used tags in an incorrect manner, I think I would need to see an example in order to advise.
My first thought is refactor, but understand that is not always a possibility.
shakilsultanali
3,113 Points<p></p>
Call us
<br>
or fill out the short form below
<br>
<br>
This is me copying it from Chrome's web dev....that's how the browser interprets it so I was wrong that they interpret is as p. However, when you hover over that p element in Chrome Web Dev...it highlights the text below.
When viewing a page source on CMS (not wordpress), I am seeing this. Usually the CMS's WYSIWYG editor is very good and automatically applies p element on every text and new line so this seems that they've done must hard pasting or not sure.
<h1>Heading</h1>
<p>#snippet#</p>
Call us<br />or fill out the short form below<br /> <br />#form-here#
I change it to
<h1>Heading</h1>
<p>#snippet</p>
<p>Call us or fill out the short form below</p>
<p>#form-here#</p>
I see no reason why they're using line breaks within the sentence....because the sentence automatically wraps up because of width.
Please let me know if I am doing this correctly........I can't do it on all of the pages but wherever I can....I am making sure that any page that goes through me has good code.
shakilsultanali
3,113 PointsIn some places I have also noticed that developers use div tag instead of p which is very awkward and again is wrong semantically because div is a container. For every new paragraph, a new div tag is used.....
Robert Hustwick
13,058 PointsDon't hesitate to use it. Check in your editors for it too, because you may need to fix it for styling purposes later on down the road.
shakilsultanali
3,113 PointsI have been doing that......I mean some web developers don't define p tag and use unnecessary linebreaks in the code to format text which looks pretty bad.....wherever I come across such code...I use p tag which then picks up default css settings defined for p element but was just wondering what's the standard these days?
shakilsultanali
3,113 PointsAlso how do we define CSS when developers use these practices? Is there a way or should we go and edit elements on all pages?
Ben Myhre
28,726 PointsWell, I don't know what CMS that is, but something is super jankey with that.
Personally, if 'fixing' that were a side project of mine, there would be a decent chance I would decline any work unless there is some setup issue/user use issue that can be troubleshat or they are ok with refactoring. Applying css to that, imo, would be deepening the problem.
In terms of div tags. yes, using them often is fairly standard practice... not as a replacement for html, but along side or with it. There are common frameworks such as Bootstrap or Foundation Zurb that heavily rely on them to layout the page. Additionally, it is pretty common to build css moreso around class structure rather than html hierarchy, which tends to lend itself to the use of divs.
tl;dr Divs ok. That markup up top is not.
shakilsultanali
3,113 PointsActually I meant this,
<div>para</div>
<div>para 2</div>
This is not related with this CMS. Another CMS, happens rarely though when WYSIWYG editor behaves weirdly.
Ben Myhre
28,726 PointsI don't know what CMSs you are using, but that looks like garbage to me. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
shakilsultanali
3,113 PointsAbsolutely Ben, I know that's not the right way for Div and serves no semantic purpose at all.......
shakilsultanali
3,113 Pointsshakilsultanali
3,113 PointsHahaha true! I find it really odd whenever I come across any such code where web developers do this.....I fix them then. But because Chrome and other browsers automatically treat any such text already parse them under p tag...that's what has confused me........maybe the standard has changed etc that every text without any element defined is considered p so no need to mark it in code.
But if any web developer has been doing this let's say on all 1000 pages of the site then how do we define CSS for them? Is there a way or should we go and edit elements on all pages?