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 :)
Related
Assuming I want to change the color of a single word within a paragraph.
My options seem to be: External, Internal or Inline CSS, <font> or <span>.
What's the correct method?
Decide why you want to change the font colour.
Select the element which describes that reason the best (<em> if you are doing it for emphasis, <body> if you are doing it globally, etc). Add classes to existing elements if you need distinguish between two elements of the same type (i.e. be more specific about the reason than the type of element allows by itself).
Write a selector in your stylesheet that matches that element.
'font' may be deprecated in the near future so 'span' is the better option of the two because of that reason alone.
Always best to use external styles. Maybe add a class to your span, then you can use it again and again.
Most importantly, decide why you are adding colour to the text, if it is to emphasise a word, it would be best to use 'em' and style that using your stylesheet. If a user was blind, they would not see the colour but they would hear the 'em' when it is being read.
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.)
I just wonder why should I use "class=" identificator instead of my own "tag"()?
Class example
<span class="red"> Hello there! (using class)</span>
.red {color: red;}
Tag example
<div id="reddiv">
<red>Hello, there (using own tag)</red>
</div>
#reddiv red {color: red;}
Its much more easier for me to use my own tags, since its faster to write.
Can you please tell me if doing it in first/second way has any negative/possitive sides?
While this may work in most browsers, your HTML then loses context. When an application like a search engine (or screen readers or anything else that looks at the source) parses your document, what is it to make of a tag named 'red' or 'purple' or 'job'? It won't have context, so you'll lose out. HTML uses a set of predefined tags that have meaning, you can venture out of it but you'll lose the advantage of everyone instantly understanding (all or part) of your document.
If this document is part of a data transfer framework and not on the public web, you should look at XML.
There are many advantages of using class.
First of all, with class, we use css styles which gives a lot more configuration options than simple HTML tags.
We give all the styles and formatting at one olace and just call the class everywhere we want to apply those, which in big projects like ERP, makes a big difference in code size.
The css style is more compatible with latest versions of browsers and a lot of old HTML formatting and style tags are deprecated in latest versions of HTML.
HTML tags behave differently under different browsers and different document modes. Where css will give same result everywhere.
The css classes can be applied to all the relevant tags on page at once just by defining it somewhere at the top of page.
You should also not forget that predefined tags have a lot of default properties and your custom tags none. So you would need to define everthing over again for all elements apart from span.
Also, you can have more than one class on an element, so <span class="red bold">Red</span> is possible.
You can remove, change and swap between classes to change dynamical the element style or behavior, what you can't do with tags.
Tag is element that needs class to set it behavior and style.
Custom elements are created using document.registerElement():
var reds = document.registerElement('red');
document.body.appendChild(new reds());
I came across some HTML:
<div id="div-1">
hidfoli
</div>
I want to know what does span inside a tag mean?
span is a tag, not an attribute of any element, so probably that was mistyped and the HTML is invalid.
So either a must be nested inside the span tag, or span must be nested inside the a tag, but as far as attribute goes, there is nothing as such.
You can always validate your markup using W3C Validator.
If you mean that span is NESTED inside the a tag, than I can show you how it can be used.
<span>Hello</span>
Say you have above in your markup, now both the elements are inline so designers often nest the elements in such a way to achieve some typography effect say...
a {
color: red;
}
a span {
color: green;
}
Demo
Or he wants the two words on different lines, so he can do something like
a span {
display: block;
}
Demo 2
So it can be used in various scenarios but as far as your syntax goes, it's completely invalid.
Just some more information over attributes, if you want to define custom attributes, for some or the other reason, you can create them by prefixing their names using data-, and this is valid in HTML5 so the above can be written as hidfoli.
It does not mean anything.
It is ignored, except in the sense that browsers still parse the attribute and store it in the DOM (not directly as a property of the element node, but in the attributes array).
The example contains invalid html, it should be:
<span id="next">hidfoli</span>
In general a span is used to wrap text so that specific styling may be applied. More specifically as stated by the MDN Documentation:
The HTML element is a generic inline container for phrasing
content, which does not inherently represent anything. It can be used
to group elements for styling purposes (using the class or id
attributes), or because they share attribute values, such as lang. It
should be used only when no other semantic element is appropriate.
is very much like a element, but is a block-level
element whereas a is an inline element.
Looks like a mistake to me, it probably meant:
<span id="next">hidfoli</span>
Playing a little bit detective, the author probably put a span with id inside the to be able to access 'hidfoli' string, then realized mid-way that he could put the id right on the and thus ending up with a faulty html code.
Your html code is invalid html...span is html tag which can be placed inside a tag not as attribute of a tag.
correct way
<span>hidfoli</span>
Span is a HTML tag its not an attribute this is incorrect.
may be like this
<span id="next">hidfoli</span>
but will be same as
hidfoli
Using the first one not required just for giving text may be used for styling purposes.
Or if you are going to give attributes to nested objects like
a span $('a span') in Jquery
{
} in css or
Are both <h1><a ...> ... </a></h1> and <a ...><h1> ... </h1></a> valid HTML, or is only one correct? If they are both correct, do they differ in meaning?
Both versions are correct. The biggest difference between them is that in the case of <h1><a>..</a></h1> only the text in the title will be clickable.
If you put the <a> around the <h1> and the css display property is block (which it is by default) the entire block (the height of the <h1> and 100% of the width of the container the <h1> resides in) will be clickable.
Historically you could not put a block element inside of an inline element, but this is no longer the case with HTML5. I would think that the <h1><a>..</a></h1> approach is more conventional though.
In the case where you want to put an anchor on the header, a better approach than <a id="my-anchor"><h1>..</h1></a> would be to use either the id or the name attribute like this: <h1 id="my-anchor">..</h1> or <h1 name="my-anchor">..</h1>
In pre HTML 5 this one
<a><h1>..</h1></a>
will not validate. You can use it in HTML 5.
However, i would use this:
<h1><a>..</a></h1>
unless you need to add more than < h1 > inside the < a >
<a><h1></h1></a> is not W3C valid... Basically, you can't put block elements inside inline elements
<h1><a>..</a></h1> and <a><h1>..</h1></a> have always behaved almost the same, when style sheets do not affect the rendering. Almost, but not quite. If you navigate using the tab key or otherwise focus on a link, a “focus rectangle” appears around the link in most browsers. For <h1><a>..</a></h1>, this rectangle is around the link text only. For <a><h1>..</h1></a>, the rectangle extends across the available horizontal space, since the markup makes the a element a block element in rendering, occupying 100% width by default.
The following shows how a focused <a href=foo><h1>link</h1></a> is rendered by Chrome:
This implies that if you style elements e.g. by setting a background color for links, the effects differ in a similar manner.
Historically, <a><h1>..</h1></a> was declared invalid in HTML 2.0, and subsequent HTML specifications followed suit, but HTML5 changes this and declares it as valid. The formal definition has not affected browsers, only validators. However, it is remotely possible that some user agents (probably not normal browsers, but e.g. specialized HTML renderers, data extractors, converters, etc.) fail to handle <a><h1>..</h1></a> properly, since it has not been allowed in the specifications.
There is seldom a good reason to make a heading or text in a heading a link. (It’s mostly illogical and bad for usability.) But a similar question has often arised when making a heading (or text in a heading) a potential destination for a link, using e.g. <h2><a name=foo>...</a></h2> versus <a name=foo><h2>...</h2></a>. Similar considerations apply to this (both work, there may be a difference since the latter makes the a element a block, and before HTML5, only the former is formally allowed). But in addition, both ways are outdated, and using the id attribute directly on the heading element is now recommended: <h2 id=foo>...</h2>.
H1 elements are block level elements, and anchors are inline elements. You are allowed to have an inline element within a block level element but not the other way around. When you consider the box model and the HTML spec this makes sense.
So in conclusion the best way is:
<h1>Link</h1>
do you want to use a hyperlink <a href="…">/a:link, or do you want to add an anchor to your heading? if you want to add an anchor, you can simply assign an id <h1 id="heading">. you can then link it as page.htm#heading.
if you want to make the heading clickable (a link), use <h1><a></a></h1>/h1 > a – blocklevel elements first, and inline elements inside
Also, there is style hierarchy differences. If you have it as <h1>Heading here</h1>, The styles of the anchor will overrule the styles of the h1 element. Example:
a {color:red;font-size:30px;line-height:30px;}
WILL OVERRULE
h1 {color:blue;font-size:40px;line-height:40px;}
I think the <h1>text</h1> is the least problematic with weak or old browsers, but modern browsers and powerful search engines are supporting both it and <h1>text</h1>; So it's a good freedom and useful to use both to improve our web page.
«Hope that could be useful»
Both are correct. They depend on the sizing of the anchor tag which you want and how you want your website laid out.
You can do <h1>Home Page</h1>, in which case it would return: Home Page But with an Anchor.
Or you can do <h1>Home Page</h1> and it would return a H1 hyperlink instead of just heading an anchor to the H1, like so:
Home Page
However, mostly you cannot add links within H1 because it will just render it as an anchor onto the h1 rather than adding a hyperlink. However, I think I'm right in saying that you could see a difference in behaviour for this on different browsers.
But correct me if I am wrong. :)