Is there a way to have blank HTML tags or in other words, tags that do nothing? For example <p> turns the inclosed text into a paragraph, <b> turns the text bold, <div> creates a box. I'm looking for a tag that has no effect on the text or it's environment. I want this so that I can customise it myself with css or js.
I am <x class="FancyText">king</x> of the world.
There are no “blank HTML tags”. What come closest are span and div, but the latter causes line breaks before and after (block rendering) by default and cannot be used in inline context, and the former does not allow any block-level elements inside it.
In practice, you can use a made-up element, like <foo>...</foo>, though with some problems on older versions of IE. This is widely regarded as a bad move, though; using span or div, as appropriate, with a class attribute is recommeded.
Consider explaining what you are really trying to achieve, instead of referring to fictional HTML tags expected to do nothing.
For this you'd use either the div or span element. From the HTML5 editor's draft:
The div element has no special meaning at all. It represents its children.
The span element doesn't mean anything on its own. ... It represents its children.
The difference between them is that the div element should be used where flow content is expected (that is to say, sections on a page), whereas the span element should be used where phrasing content is expected (within text).
In the example you've given, you'd want to use the span element:
I am <span class="FancyText">king</span> of the world.
You can do the following:
<div></div>
This will do nothing unless you add a class or id.
Or,
<span>Some text</span>
This will do nothing unless you add a class or id.
if you want to use <x ...> txt </x> as a place holder,
than any officially-unused set of chars will do fine.
I use <a> ... </a> for that
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 :)
This question already has answers here:
What are alternatives to the span-element? [duplicate]
(3 answers)
Closed 9 years ago.
Here is an example.
<span id="s1">Hello</span>
<span id="s2">world</span>
<span id="s3">this</span>
<span id="s4">is</span>
<span id="s5">a</span>
<span id="s6">sentence.</span>
Basically, I have a script that separates words of a sentence into a span. Is there a better approach of doing this? Perhaps an alternative to span that I don't know about? I thought of using something like <u> because it is short, then removing default underlining. Also <p> wont work because it is a block element.
Any ideas?
For semantics reasons, I'd advise against using other elements, unless there's some real need for you to have shorter element names. <span>s are semantically neutral elements, so they'd be ideal for this situation.
This is probably exactly what you should be doing if you really need to style each word differently. It's a meaningless tag used to group inline elements (in this case, words).
The span element .. doesn't mean anything on its own ..
The span element is the only element in HTML that has been defined as not meaning anything as such, so it is the element to be used when you wish to make e.g. a word an element in order to manipulate it, without assigning any meaning to it.
However, an a element without an href attribute is also “semantically” empty and with no default rendering rules. Some people have used <a id=foo>...</a> instead <span id=foo>...</span>. However, some programs may process such an a element in some special way (as if it were link-like anyway), and people may write style sheets in a manner that expects all a elements to be links. So such use of a is risky with no benefit beyond shortness. It also makes the source code less legible, since such use is not common.
In practice, you could, up to a point, use a custom tag, like z (with document.createElement('z') in JavaScript to make old versions of IE treat it as styleable). Browsers would treat it as unknown element, letting you handle it in scripting and (with the caveat) in CSS. But imagine what happens if some future version of HTML, or HTML as recognized by some browser, contains an element with the name you selected, with some fancy meaning and effect (like “don’t display this element” or “blink this text”).
I would agree with the answers Nightfirecat and imjared posted. <span> is probably the best element to use in this case as it denotes a neutral inline element.
However, if you really had to stretch a hack, you could try <em> since you are emphasising each word in its own way.
I'm looking for a CSS tag that can provide an id for text. I want to be able to modify the text with javascript, so i need something like:
<texttag id="the_id">the text</texttag>
All the other tags i've tried affect the formatting one way or another. For example it would be used in a sentence, such as:
You live in <texttag id="town_id">Newmarket</texttag>. Thats a nice town.
And it would display as:
You live in Newmarket. Thats a nice town.
But I would have the ability to modify Newmarket with the id town_id ..
See what i mean? If I use <p> or <div> the text wraps..
The <span> HTML tag has a display of inline and has no presentational nor semantic meaning attached to it. You can use CSS to apply whatever styles you'd like or script to modify the element's contents.
This sentence has <span id="whatever">text</span>.
To change contents:
docuent.getElementById('whatever').innerHTML('changed text');
To style that specific element:
#whatever { font-weight:bold; }
Also, you may want to read about the difference between block and inline elements. (And an expanded explanation here.) (<p> and <div> are block; <span> is inline.)
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>