In general, I try to use semantic html to improve accessability. However, I'm working in an existing codebase and noticing that a lot of single-line text used in the layout is placed directly in <div> tags, to avoid the bottom margin that comes with <p> tags.
<div>Team Average is 20%.</div>
Does this have direct accessibility implications, and if so, what are they? Will using <p> tags and adding a style rule to each one to get rid of the bottom margin produce distinct accessibility benefits? (I realize I could just set p elements to have no padding via CSS, but as this is an existing codebase, that isn't an option.)
I also realize I should use more semantic html where possible; this is just in situations where nothing more specific applies.
In my experience, assistive technology will function better, and the page will be more understandable when text is placed in paragraph tags, as opposed to divs.
Divs seem to be treated more like raw text. If the div uses line breaks to simulate paragraphs, then the visitor will be unable to easily skip paragraphs or move between paragraphs without listening to the contents of the entire div.
Using divs instead of paragraph tags is definitely sub-optimal. Whether or not it's a failure of WCAG 1.3.1 is debatable. If it's relatively easy to change this out, it would be better to do so.
W3Cschools said "Any sort of content can be put inside the tag!" (https://www.w3schools.com/tags/tag_div.ASP) and in my experience there's no accessibility issues related to this.
DIV are for a division of space and it's no rules about their content however it's best for design to have html elements inside of if.
If you are concerned about accessibility rules i suggest you to check your website with some tools like the following ones:
aXe
Wave
Google Lighthouse
Valmolà
If it's a single-line text, then it will not be a problem.
If the text has more than 1 paragraph, then you should use <p> tags.
Related
I have some HTML that looks like this:
<div class="position-container">
<div class="top-position">1</div>
<div class="current-position">2</div>
</div>
I won't bother adding the style here, but basically the 1 and 2 are each block elements with specific background colors. Some dude I work for doesn't like me using so many divs, so he wants me to change the first div in "position-container" to <strong> and the second to <em> and then change their display to block.
I was under the impression that those elements should be used within a block of text to indicate emphasis within a given context. I also thought they were semantically to be used in an inline manner. Am I off the mark? Should I really just be arbitrarily throwing around <strong> and <em> tags once my <div> count gets a bit high?
The problem shouldn't be that you have too many HTML elements that are divs, but the problem arises if you have too many HTML elements tout court.
"Some dude" in your story is, then, wrong in my opinion. In some cases - and possibly for some SEO benefits - some HTML elements are preferred over others, but you can't just look at a HTML page and say "Well, I see so many div tags, why not change this to that and that to this and it looks prettier!"
The thing I would look at is: how can I make my HTML structure more semantically logical. This would probably involve all te new HTML5 elements. The use of section, article, aside, nav and role attributes make a page much more intuitive and logical. Basically, with HTML5 you can show a person that knows nothing of webcoding the code of your HTML5 page and by simply looking at the tags you used, he can easily derive what is important and what not. That's the beauty of HTML5.
So, before randomly starting to change some div tags to strong tags, consider HTML5. And you might also want to ask WHY "some dude" wants you to change it. Maybe he does have a legitmate reason, you never know!
Strong and Em are inline tags that should be used to either bold or add italics to words themselves. That's basically it. They shouldn't be block elements. Not really their purpose.
The guy saying you have too many divs, and recommending the used of either strong or em as block elements to alleviate this issue is incredibly off base in their approach.
I would recommend, to at least offer up something different, use HTML5 element tags such as article, section, header, footer, etc. to make the code a little more readable. Assuming that's what you're looking for.
If you need to support older browsers that don't recognize newer tags. Take a look at something like Modernizr.js.
Is it considered bad style to use <br>? I have a text element that I would like to break up into two lines, is there a more recommended way to do this or a different element I should use?
The question you need to ask is, why do you need to break up the line?
If it's to make it fit in a space,
you need to use CSS to set word
wrapping and width values.
If it's because they are distinct
paragraphs, use the <p> tag.
If it's because you need to show a
visually distinct sample of
something, set display: block with
CSS.
Otherwise, it might be okay. What's the reason for the break?
You want to be as semantically correct as possible, and you want to separate presentation from content.
Semantically, the break tag is intended to convey a natural break in the flow of information - it's a little vague, but the idea is to use it when you need to indicate that there is a logical separation between elements but that they are still part of the same general context.
For instance I might have fieldsets styled so that they layout inline, racking up horizontally. In that scenario if I wanted to separate two fieldsets in the same form, I'd likely use a break tag. It indicates both visually and semantically that the fieldsets are still part of the same context but that there is some concept of seperation between them.
Another, probably better example: the address element.
<address>
<p>
123 Main Street<br/>
Townsville, USA 12345
</p>
</address>
The spec equates it to a carriage return. http://www.w3.org/TR/html401/struct/text.html
They're only 'bad' when you're using them for layout - i.e.: multiple breaks to emulate spacing that should really be handled in a cosmetic layer (like CSS).
As the title says, would it be better to wrap text using <div> or using <p>. Which would work better for SEO?
Semantically you should always use <p> to hold any "content" text within the body of your page. Similarly, headings should always go in <h1>, <h2> etc. Only use <div> for layout and positioning purposes (so for example as a wrapper around the main body of content, sidebars etc).
Search engines will typically rank pages using semantic HTML higher in their results as pages laid out in this way are more "machine-readable".
Div always uses for styling and decorating the form so that it is not a useful element to wrap texts. in a well-formed & standard html tag, you have touse p to show the search engine or whoever, that you are displaying a paragraph or your are writing some text
It is not a command but a best practice which you need to follow for a better coding.
Do not use same element for same reasons. each one has one destiny.
Search engines crawl the page and look for semantic structure and determine a logical hierarchy for your content.
<h1> tags are treated different to <h2>, <h3> and so on. a <div> tag would put your content on par with other content within other div tags.
I'd choose <p> over a <div> if the content is 'important', relates to what your website is about and has a chance to contribute towards your SEO.
You should always use the right tag for the job.
<div> is used to divide the page into logical sections. <p> is for paragraphs of text. <h1> through <h6> are used for headings. <ul> and <ol> represent lists of data. <table> and it's children are for tabular data. <form> is for forms and so on.
Working this way has benefits for SEO because the search engines know what sort of data they're reading and can rank it's importance accordingly. It also gets you a good way towards improving accessibility (e.g. screen readers will often build a page outline based on heading structure). More importantly for you, it makes it a lot easier to style your website consistently.
It doesn't make a difference for SEO as far as I'm aware, p will be just fine.
Semantically, p is supposed to represent a paragraph and div an arbitrary (sub)division - practically, however, the distinction between the two is fuzzy, and certainly won't matter for SEO purposes.
you should use one of them if you are using <P> than don't use wrap these both are same and no one is better for seo because html and css code don't have mean for seo.
if html tags or css name can make site better than seo have no mean because about all site have html tag. that sure alt and title can make your site according seo.so you should use one of them according you.<p> or wrap
As long as only word wrap is concerned, they are the same. you can set CSS attribute of word-wrap with break-word to force word wrap, see a cross browser solution here. you can even do word hyphenation or justification using this lib .
Regards.
p will be fine/
but i prefer using that in html5 tagging/
header, nav, section, aside etc./
I see the <p> tag used a lot in the code of others but have never used it in my own work.
I'm wondering what advantage this gives over using a <div> tag?
Are there any benefits I could get
from incorporating the <p> tag
into my pages?
Is there any disadvantage in only
using <div> tags without <p>?
DIV indicates a separate section on a page, which is not semantically connected to the others. With P tags you indicate that this piece of text is broken into paragraphs but it still stays a single entity.
ADDED: With "semantics" people usually refer to the possibility to extract information from HTML as to what various elements of a page represent and how they are related to each other, as opposed to treating the whole HTML as just a markup to be rendered. For example, when you do menus it is recommended that you use ULs (unordered list) for that purpose, because it will be possible to learn from the markup that all LIs (list items) contained within a particular list probably mean choice options of the same level. I know it is helpful for screen readers for impaired people that you try to make your markup as semantic-rich as possible.
If you're not concerned with this, then it is virtually no difference for the rendered result whether you use DIVs or Ps. You can style both with CSS to achieve the same look and feel.
Semantic HTML is still not "the absolute good" to be strived for. For many people semantics does not add any value as they wish just that their pages are rendered correctly. That's why the ever-lasting discussion on whether to use tables for markup (and add semantics where it does not belong) or stick to CSS is not going to end any soon.
p means 'paragraph', div means 'division'. That's as complicated as it gets. It's a way of telling search-engines, scrapers, tools, etc that this is a paragraph of text.
div is undesirable when you're actually marking up a 'paragraph' of text.
Both tags have a different purpose.
p indicates a paragraph, usually for
organising content (text and
images,mostly)
div on the other hand is a
rectangular space on the canvas,
usually for layout purposes.
Example: You would put your navigation panel in a div, making it easy to move it from the left to the right of the page, or switching to a 3 column layout. The different sections in your navigation (first the general site navigation, next specific hotlinks to the most recent blog post or whatever) could be seperated by putting them in defferent paragraphs.
(I know, bad example, because the navigation is better represented by unordered lists, but what the hey).
In direct answer to your question, they give you the advantage of differentiating between organising your layout and organising your content, in a way that becomes clear in the HTML source.
If you are tagging content so you can lay it out with CSS, you probably want <div>; <p> should be used to indicate a paragraph of text and that's it.
Beyond just the semantics of it (which are important), you will also want to consider validation problems. According to the HTML4 spec, you are not allowed to nest other block-level elements (<div>, <ul>, other <p>, etc) inside a <p> without invalidating your HTML.
I've seen a number of instances where parsers will choose to prematurely close the <p> to allow the other nested block element to begin.
Are there any benefits I could get
from incorporating the tag into my
pages?
Yes, provided that you use it correctly -- because the use of semantic HTML is always a benefit.
There are a range of reasons why this is so, but the primary one for people who need a quick explanation is SEO. Search engines will understand your page better if you use semantic HTML.
p tags are for paragraphs. p tags often contain additional CSS styling regarding the textual content that goes into them, and this styling can be defined in various places in the css documentation. for example, a p usually has a bit of extra space below it. if you try laying something out with p tags, you'll end up with uneven padding.
It is better to use divs if you want to have more control over the content in your page from a programmatic perspective. sticking to divs for all layout concerns will also allow you to use p tags exclusively for paragraphs.
Is there any benefit in using a <blockquote> element over a <div>? I was looking at a website's markup to learn CSS and I couldn't figure out why the <blockquote> was being used.
EDIT: Yeah sorry I didn't clarify, it was used to hold the <div> tag with username as 'text' and an input tag. There was clearly no quote.
Semantically, a blockquote tag makes sense when you're quoting something. Sure, a stylized div can do the same thing, but why not use the right tag for the job?
Additionally, the blockquote tag allows you to include a citation with the cite attribute.
In theory, HTML should be as "semantic" as possible - meaning that every element should indicate something about its content. <h1>s should enclose the most important headline; <p>s should surround paragraphs; <em> should indicate emphasis, etc.
That way the code makes sense when you - or a screen reader, or whatever - look at it. This also helps for devices that don't understand all (or any) of your CSS rules.
<blockquote> should be used when the text it contains is a block quote. This sounds very obvious to me, so is there another aspect to your question?
As mentioned, <blockquote> is for quoting. Similarly you will use several <p> blocks for paragraphs within one <div> that holds page content or whatever. HTML5 proposal will have lot more block elements (i.e same as divs) which purpose will be to add a semantic info about it, such as header, footer, menu, etc.
As mentioned earlier, blockquotes are for quotes. Just like tables are (arguably) for tabular data, lists are for listings, divs for divisions, p for paragraphs, etc.
Sure, you could almost everything with divs. That's the beauty of using HTML with CSS: you can make anything look however you want it to look (in theory, in the real world browser quirks mess that up sometimes).
Using divs for anything you can think of is commonly known as 'divitis'. See this article for a little explanation :)
The likely reason they're using blockquote is that many people dabbling in HTML don't know enough about CSS to know that a div can be given the same left-margin as blockquote renders with by default.
Easy peasy, right? Nothing has really changed. Remember that as is a ‘block-level element’ (flow content) we can put most anything in it, including headers, images, and tables, in addition to the usual paragraphs of text. There are a couple of slight differences in HTML5 though. is a sectioning root, meaning that any - elements it contains don’t become part of the document’s outline. Also, adding a single paragraph of text with no enclosing tags is now completely kosher. Here are some simple examples (apologies for the fake content):
The suggestions in my article came directly from writing and editing a few megs worth of raw text used on my website, which bought up lots of edge-cases and curious questions about semantics; so whilst I wouldn’t say my choices would suit everybody, they have at least been trialed in a background of the text.
My complaint about the ABBR article you published here on HTML5Doctor was essential that you weren’t following your own advice, as I know that I practically went insane trying to use those rules on megs of text before I came up with my own to take back control of my sanity.
But, I will definitely say that cite still remains the weaker out of the three and I appreciate this article for being far more square.
If you would like, my article could be further adapted with feedback from the doctors to better suit a broader audience. I strongly believe that a key part of learning HTML5 is learning HTML4 properly and eschewing spans and divs for semantics where possible