basically I have some nasty markup:
<td colspan="2">
<strong class="ajax_cart_quantity">8</strong>
items
<strong class="ajax_cart_total">
271,60 $
<span class="price-2"> (210,66 €)</span>
</strong>
</td>
I formatted the code so it is easier to read. Here:s my problem: I need to give .price-2 some styling (smaller font).
What I can't do: use class or attributes, because total value is updated and refreshed via ajax, and giving class attribute to span.price-2 breaks down json.
What I can do: wrap second price in some distinctive elements without classes and attributes.
There are already some seletors in core css which target second price table span. So basically I need to come up with some other inline element line span, so I can create my own styling selector for price 2.
I need something compatible with the older browsers too.
Thank You
Personally, I'd use <em> or <small>. They're both valid and fully supported, furthermore they impart some style of their own which could be useful.
But you don't event need a replacement - just use span without the class and target it differently in the CSS:
.ajax_cart_total span {font-size:0.8em;}
Leave the html as it is add to CSS a specific selector:
table td strong span.price-2 {
font-size: 0.8em !important;
}
Add the !important only if the selector (table td strong span.price-2) is not specific enough.
This works even in ancient browsers.
If you just need another inline element that (still) works, you could make use of <b> or <i> - those work inline are still supported :)
(<b> was used for bold and <i> for italics, but in HTML these text effects are currenty accomplished with <strong> and <em>). <b> and <i> still exist albeit used much less frequently to achieve the aforementioned text emphasis. They will be interpreted inline.)
Related
I have a site where the designer applied CSS to the base <span> tag which makes the tag effectively useless for microdata markup unless I want all my text to be blue, bold, and 125% bigger than normal. Are there alternative tags that I can use? I understand that I can use <meta> but I actually want the content to appear and it seems overkill to have to write it twice.
You can use every HTML5 element for Microdata. But note that some elements have special rules for determining the value, and some elements come with additional requirements if used with Microdata.
If your question is if there is another inline HTML5 element that has no meaning (= span): no, there isn’t.
If your question is how to use span without the applied CSS: add a class to "your" span elements and overwrite any applied CSS with CSS’s class selector:
<span class="never-style-span-directly" itemprop="example">…</span>
CSS:
span {color:blue;}
.never-style-span-directly {color:inherit;}
Why not do a site-wide find and replace for existing tags and update replace with something like <span class="blueLargerTextWhyOhWhy"> (class name optional) and update the stylesheet to target that class rather than all spans.
Once done and tested you will be free to use generic tags as needed.
Also educate that designer if you can :)
I've always used <b> tag to bold something, because that is the way I was taught to do it a long time ago. But now my IDE always informs me that <b> is deprecated and to use css style. Assuming by that they want me to use <div style="font-weight:bold;">Bold Text</div>. How vital is this message that my IDE is giving me? Should I go back and change all my<b> to style?
Below is an example of both situations. Could someone explain the difference's between both and why <b> is deprecated now?
<b>Bold Text</b>
Vs.
<div style="font-weight:bold;">Bold Text</div>
Would <b> be better because if someone has css turned off on the browser, it would still be show correctly?
The correct question is: "What markup best describes my content?"
Let's start with the <b> tag (which is not deprecated):
The b element represents a span of text to be stylistically offset
from the normal prose without conveying any extra importance, such as
key words in a document abstract, product names in a review, or other
spans of text whose typical typographic presentation is boldened.
...
You should not use b and i tags if there is a more descriptive and
relevant tag available. If you do use them, it is usually better to
add class attributes that describe the intended meaning of the markup,
so that you can distinguish one use from another.
...
It may help to think of b or i elements as essentially a span element
with an automatic fallback styling. Just like a span element, these
elements usually benefit from class names if they are to be useful.
http://www.w3.org/International/questions/qa-b-and-i-tags
By comparison, <strong> has a more specific purpose:
The strong element represents a span of text with strong importance.
http://www.w3.org/TR/html-markup/strong.html
For example:
<p><strong>Warning.</strong> Here be dragons.</p>
Here we emphasize the word "warning" to stress its importance.
But not:
<p><strong>Item 1:</strong> Foo, bar, and baz.</p>
"Item 1" isn't meant to be stressed, so <strong> is the wrong tag. Furthermore, it's possible that the whole structure could be better represented.
If the meaning of the text has strong importance, <strong> is appropriate (just like this line).
Perhaps you just want a thicker font for style purposes and the text has no particular meaning. In that case, neither <strong> nor <b> may be appropriate.
<span class="product-name">Hello World</span>
.product-name { font-weight: bold; }
In all cases:
Use the markup which describes the content.
Do not use inline styles (use an external stylesheet).
Do not name styles based on their visual representation (e.g. naming a style "bold" is a poor choice)
Would <b> be better because if someone has css turned off on the
browser, it would still be show correctly?
No. Use the correct markup for the job. It's fairly unusual for someone using the visual representation of your site to willingly disable the stylesheet, but non-visual consumers care primarily about the structure of your document. A "non-visual consumer" could be a search engine parsing your content or a screen reader application.
Additional Reading:
http://www.w3.org/TR/html51/text-level-semantics.html#the-strong-element
http://www.w3.org/TR/html51/text-level-semantics.html#the-b-element
It's not "vital" if the code still works. Though it would conform to current standards which will give the code a longer future.
The difference is that using CSS separates your styling from your content. <b> is a style, nothing more. And it tightly couples that markup to that style. The separation allows you to emphasize the markup in other ways instead of always using a bold font.
Would be better because if someone has css turned off on the browser, it would still be show correctly?
No, because if the user wants to disable styling then your <b> tag undermines that, because it's mixing styling with content.
You should be using <strong> in place of <b>. You could use styles (text-weight: bold in a separate sheet) if a particular group of text was always going to be bold, and you didn't (or couldn't) want to use <strong> for whatever reason. But I would only go that route if you already were applying other styles to that same element.
If you are talking about SEO
Use <strong> should be SEO friendly too... (focus on the keywords)
and it's important !
I find that using <strong></strong> is the better approach than using <b> or inline styles.
I am working on some legacy PHP code that holds a ton of in-line styling, one of our objectives is to leverage CSS so the code will be cleaner. One thing that got me thinking is the use of native html elements VS the use of CSS, such as bold and italics.
For example,
<b>this is foo</b>
Or in css
.bold { font-weight: bold;}
<span class="bold">this is foo</span>
While these two do the same thing, which one do you guys prefer and why?
Always use HTML tags when they can add meaning, structure, or semantics to your content. If you want to write the sentence I <strong>love</strong> cheese (where the word "love" should carry particular emphasis), the <strong> tag is the correct choice. CSS is absolutely not an acceptable solution.
Always use CSS when you are changing the visual appearance of your page. The title heading on your page is a <h1>...</h1> (end of story), but you can make it bold or not, big or not, purple or not using CSS.
A good acid test is to imagine how a screen reader will interpret your page. If you view the page without any stylesheets attached, it should ideally show your content in a linear, minimal fashion, that is in fact quite ugly, but that conveys all the content you wanted to include on the page.
I think you're looking at a false dichotomy, <b> or .bold. Given the choice between these two, I'd probably choose stylised spans over use of the <b> tag, but that's purely to divorce presentation from mark-up.
There is, though, the strong tag, which is more semantic than the use of span.bold, and less purely-presentational than b, although it does, obviously, imply a presentational choice. This is my preferred choice over-all.
Instead of using bold (or span class=bold for that matter), you probably should consider the semantics of what you want. Is the text important? Use strong or em (emphasis). This helps on things like search engine visibility as well.
You should choose the tag based on semantics - afterall, CSS can be used to style them to look like anything.
W3C recommends keeping your HTML as semantic as possible. So you should use <strong>, <em> and other HTML tags instead of various <span>s with classes on them.
As a matter of fact you could have all your HTML code with just <div>s, but that doesn't mean you should do it.
As for <b>, <i> and other tags with no meaning, you should discontinue them.
IMHO, CSS is the way to go.
Reasons :
1 - You should not mix your styling code with your content.
2 - Easier to customize/change your final representation in required, or can represent them differently using different css.
3 - Separation of responsibilities in terms of who maintains what
I prefer using the span because it is infinitely stylable. The bold tag is always bold unless you override it, and then it's useless anyway.
Semantically, you should use html to describe the emphasis used here. The <b> is obsoleted and <strong> should be implemented to describe the text. In addition, the css should reflect the styling for the selector:
strong { font-size: whatever; }
<strong>this is foo</strong>
There are stuff like bold letters that I prefer to still leverage to html, SEO mainly. But if you combine more than one stile i.e. Bold and Italic it would be good to have an style called accent maybe. But trying to keep style out of html would make you happy (Less stuff to maintain) and your users happy (less code to transfer, they would access slim pages).
How do you guys handle marginal CSS? By marginal, I mean a single word or phrase that needs italics or bolding. It seems silly to declare a 'bold' class with just
Bold { font-weight: bold; }
Or italics, either!
Italic { font-style: italics; }
But I find myself hesitating to put class like that into my css reset.
<p>
<span class="Italic">This</span> man?
<span class="Bold">What</span> are you thinking?
</p>
Obviously if you're going to combine a bunch of properties to make something look different, it makes sense...
.HoverOnMe
{
color: #880;
text-decoration: underline;
font-style: italic;
}
But I'd classify the above css style as 'non-marginal'.
We're taught that elements like <b> and <i> are bad because they mix structure and style, and therefore we shouldn't use them. So what is the right way to handle 'marginal css'?
When you add a class to an element, name that class by what it represents, not what it looks like. class="Italic" is an anti-pattern that completely misses the point of separating content and styling.
<span class="Italic">This</span> man?
<span class="Bold">What</span> are you thinking?
If what you mean to say is that the word “This” is an emphasised word—that is, if you were to read the sentence, you'd change your tone of voice when pronouncing it—then you should say so with a class name like class="emphasised". However you don't need to do that, because there is already an element available in HTML that has exactly that meaning, specifically <em>.
<em>This</em> man?
As luck would have it, browsers will render <em> as italic by default, so you wouldn't need any more CSS.
You shouldn't always use <em> for italics. There are other reasons a word might be italicised. For example it might be a citation (use <cite>), or a phrase in another language (use <span lang="fr">c'est la vie</span>), or it might just be a typographical quirk with no semantic meaning (in which case a plain <span> with styling is fine). Use the element that most closely matches the semantics of what you are trying to say, and adjust the rendering with CSS if the default rendering doesn't match what you wanted it to look like.
There is a second form of emphasis that is rendered as bold by default, <strong>:
<strong>What</strong> are you thinking?
This is usually considered to mean “more emphasised than <em>”. If that is what you were going for, use that tag. But again, don't jump for <strong> just because you want something bold. If it should be bold because it's a heading, use the heading tags. If it should be bold because it's the first line of an article or something, add a class="first-line" (or simply use a CSS :first-line selector, where appropriate).
Instead of <b> and <i> use <strong> and <em>. These have semantic meaning and are often default-styled by browsers to be the same as <b> and <i>, and of course you can control their style like any other element.
I certainly would avoid creating Bold and Italic classes in your CSS stylesheet.
When you say 'Marginal', if you mean that it is like a one-off case and you dont feel you should create a class just for this one case, then what about just using inline CSS?
e.g...
<p>
<span style="font-style:italic">This</span> man?
<span style="font-weight:bold">What</span> are you thinking?
</p>
Why not create a css class that describes the intent rather than the action of emphasizing. You could call it something like "importantWord", and yes, it's fine that it only contains a single rule. The important thing is that if you decide to change the appearance of the style, semantically, it will still make sense.
I think you did it write using . You could use too to render default bold but it would have another meaning since it precise the importance of the text within it.
There's no better way for a one-attribute css rule.
The span element seems to be exactly like a div, but at the in-line level rather than at the block level. However, I can't seem to think of any beneficial logical divisions that the span element can provide.
A single sentence, or word if not contained in a sentence, seems to be the smallest logical part. Ignoring CSS, since CSS is only for layout and not for semantic meaning, when does span provide additional semantic value by chopping up a sentence or string of words?
It seems that in all cases, other elements are better suited to adding semantic value, making span a purely layout element. Is this true?
Span can be used to add semantic meaning that falls outside the scope of HTML. This can be done by using classes which identify certain attributes. For example, if you are writing a science-fiction novel you can use span to identify made-up words, because you may want to format those differently, or because you may want the spell-checker to ignore them:
Then the wizard called upon the <span class="wizardword">gravenwist</span> and bade it attack the approaching army. The <span class="wizardword">gavenwist</span> resisted but the wizard's <span class="wizardword">wistwand</span> was too powerful.
This could render as
Then the wizard called upon the gravenwist and bade it attack the approaching army. The gavenwist resisted but the wizard's wistwand was too powerful.
Another good example of this sort of thing are microformats, which allow the creation of arbitrary structure within HTML:
<span class="tel">
<span class="type">home</span>:
<span class="value">+1.415.555.1212</span>
</span>
The advantage of span, versus div, is that spans can appear almost everywhere because they are inline content, and divs are block elements, so they can only occur inside certain other elements.
A very useful benefit would be to mark changes in language. E.g.
<p>Welcome to Audi UK, <span lang="de">Vorsprung durch Technik</span>.</p>
Screen readers with multiple language capabilities could make use of this.
So they're not presentational, just generic. In fact, spans are rarely presentational, providing a semantically-meaningful class name is used, like "spelling-mistake" and not "bold-red-text".
<div class="name">
<span class="firstname">John</span>
<span class="lastname">Doe</span>
</div>
It depends completely on what you want to express. If marking up the first name is of semantic value to you (be it just to have a hook for CSS to format first names or to extract them using some scripting language), then you can use a span.
I use SPAN a lot when I want to have JavaScript parse the element and insert some value inside the tag, for example:
<span datafield="firstname"></span>
Would have a value inserted into it later, so in that case it does have meaning, though only a meaning that I decide to give it. The fact that span otherwise has no effect on the layout is ideal in that case.
spans can actually be carriers for semantic information in form of class attributes. This is used by microformats.
span tags need a class or id attribute to give them meaning.
e.g. <span class="personal_phone_number">0123 456789</span>
Ignoring CSS, since that will give the
semantic meaning, when does span
provide additional semantic value by
chopping up a sentence or string of
words?
Ignoring CSS (and other non-HTML markup), never. A <span>'s only purpose in life is to carry markup that you can't express in HTML. Markup such as <span style="dropCap">, which doesn't have an equivalent in HTML but has existed in print publishing for hundreds of years, and which is always applied to just one character - the first letter of an item (article, whatever), without causing a word-break (or any larger break).
It seems that in all cases, other
elements are better suited to adding
semantic value, making span a purely
layout element. Is this true?
Yes and no. The only real value of <span> is that it is semantically neutral. That is, unlike for example <p>, it doesn't do anything that you might want to have it not do when you're using it to carry other markup. And there are times, like <span style="dropCap"> above, when you don't want any other effects.
If you want to apply formatting rules to part of the contents (for example a single word or sentence) of a tag. You can use the span tag. It is sometimes called tagless formatting.
I use spans in my EBNF -> XHTML converter to apply a different format to literals and tokens.
SPAN (and DIV) elements by themselves are generally considered to be semantically neutral. A good approach is to use semantic markup as much as appropriately possible, but sometimes you run into situations where the existing html elements that do provide semantic meaning (EM, STRONG, ABBR, ACRONYM, etc, etc) aren't the right fit semantically for your content. So the next step is to use a semantically neutral SPAN or DIV with a semantically meaningful id or class.
I think he's asking about the difference between a div and a span, and there really isn't one, other than the default behavior.
It's a matter of convention. When using styling, div is typically used to demarcate divisions of content, while span is used to demarcate inline text. You could just as easily use div everywhere or use span everywhere, but it's helpful to think of them as different, even if it's only by convention.
In HTML could be used for microformats. But since actual HTML specification is XHTML, there is no point.
Instead of:
<P>Hello, my name is <SPAN class="name"> Joe Sixpack </SPAN></P>
I'd rather use:
<P>Hello, my name is <FOAF:name> Joe Sixpack </FOAF:name></P>
The meaning of SPAN is "this is a (generic) span of (e.g., text) content". Compare to DIV, which means "this is a logical division (i.e., a generic document section)".
SPAN is mainly a hook for hanging styles off of (so you can use <span style='color:blue'> instead of <font color='blue'>).
From the spec:
The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.
Suppose, for example, that we wanted to generate an HTML document based on a database of client information. Since HTML does not include elements that identify objects such as "client", "telephone number", "email address", etc., we use DIV and SPAN to achieve the desired structural and presentational effects. We might use the TABLE element as follows to structure the information:
<!-- Example of data from the client database: -->
<!-- Name: Stephane Boyera, Tel: (212) 555-1212, Email: sb#foo.org -->
<DIV id="client-boyera" class="client">
<P><SPAN class="client-title">Client information:</SPAN>
<TABLE class="client-data">
<TR><TH>Last name:<TD>Boyera</TR>
<TR><TH>First name:<TD>Stephane</TR>
<TR><TH>Tel:<TD>(212) 555-1212</TR>
<TR><TH>Email:<TD>sb#foo.org</TR>
</TABLE>
</DIV>
<DIV id="client-lafon" class="client">
<P><SPAN class="client-title">Client information:</SPAN>
<TABLE class="client-data">
<TR><TH>Last name:<TD>Lafon</TR>
<TR><TH>First name:<TD>Yves</TR>
<TR><TH>Tel:<TD>(617) 555-1212</TR>
<TR><TH>Email:<TD>yves#coucou.com</TR>
</TABLE>
</DIV>