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.)
Related
Sometimes I want to put a wrapper element around several other HTML elements with the sole purpose of setting up a convenient CSS selector to refer to all the contained elements:
<TAG id="just-a-handy-wrapper">
<abc ...>
...
</abc>
...
<pqr ...>
...
</pqr>
</TAG>
...and in the CSS:
#just-a-handy wrapper * {
...
}
I find this easier to manage and maintain than the alternative of assigning a common class to all the items captured by the #just-a-handy wrapper * selector above.
In this example, I've used fictitious tags <abc>, ..., <pqr>, etc., for the contained elements to stress the fact that I'm looking for a solution that works irrespective of the nature of the specific tags among the contents.
I've also used the fictitious tag TAG as a placeholder for the desired "wrapper tag", because my question is precisely about the best HTML tag to use for this purpose. By "best" I mean most "universal" in the types of elements it can contain in valid HTML5, and "most layout-neutral".
IOW, the ideal HTML tag would the one where the page including the code above would always be rendered exactly the same as one where the <tag ...> and </tag> lines were removed, or commented out:
<!-- <tag id="just-a-handy-wrapper"> -->
<div ...>
...
</div>
...
<div ...>
...
</div>
<!-- </tag> -->
A div, for example, is not "layout-neutral" (the browser will generally have strong ideas about how to layout a div), therefore it would not do to set tag equal to div. Here's a simple example of this:
original
with <div> wrapper around two of the three blue
rectangles
Yes, there is a CSS for that supported by major browsers
display: contents
E.g.
<section class="container"><div>Parent is virtually not rendered</div></section>
.container {
display: contents;
}
Sorry, I fear there is no such tag.
Imaginge a scenario where your <abc> or <pqr> tags are block-level tags, say <p> tags. In order to fullfill your requirement (the layout should be the same, if the tag is there or not), the container tag would need to be a blocklevel tag to be w3c conform, and it should not have any default stylings. As far as I know, a <div> is exaclty that.
Now imaginge a scenario where your<abc> or <pqr> are inline tags like <i> or <b>. In order to fullfill your requirement the container tag would need to be a inline tag itself, otherwise it would break the line.
Now the thing is it is not possible for a tag to be inline- and block-level at the same time.
And to answer your question about the most universal tags:
Use div as a container for block-level contents and use span as a container for inline contents. These tags are made for this purpose.
From the w3c Visual Formatting Model document:
Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously
In your fiddles, the lack of layout neutrality is demonstrated by the text-align: center; rule on the .outer element no longer applying to the .inner elements, once there was a wrapper element layered between them.
I know that you'd prefer to speak in generalities to stress your point about a layout neutral tag, but since all HTML elements must have a formatting context, there will always be a side-effect to adding more tags to the markup. (In this case, your <div> tag is a block.)
Most often there's no visual issue, but insofar as your layout depends on formatting contexts, adding more elements will always run counter to you having a layout-neutral tag.
I would echo #Mario A's answer that where you need to wrap a tag with something layout neutral, wrap block tags with <div>s, and inline tags, with spans, so as not to introduce new formatting contexts that could disrupt your layout.
<span> is layout neutral but it depends on which types of elements go within in, for example it cannot contain block elements like <div>. Whether an element renders as a block depends on the element, but can be specifying, for example <div style="display:inline-block"> or <div style="display:table-cell"> display differently.
Since it's a CSS question, you can use IDs on your elements to add extra CSS rules, or apply several different classes to one ID. EG
<div id="mydiv" class="blacktext">helloo</div>
<div class="blacktext class2">hello</div> <!-- apply class blacktext and class2-->
CSS
.class2 { background-color: #FF0000;}
References
[1] the <span> tag
The tag is used to group inline-elements in a document.
The tag provides no visual change by itself.
The tag provides a way to add a hook to a part of a text or a part of a document.
[2] span vs div
Answer on stackoverflow about inline-block, block and inline with <span> and ` compared
There isn't such a tag, and there very well should be one.
Some tags like fieldset have behavior that affect child elements, but also do not require having any rendering. fieldset, when disabled, will disable all children input elements and is incredibly useful. However, you cannot wrap it around a <tr> specifically because it needs to be rendered.
I think the slot tag can be a good candidate for your requirements.
I need value "1" to be displayed adjacent to "Id" field but its displaying in a new line.The tag is supposed to be inline not sure why its being moved to new line.
jsfiddle
HTML
<b>Id : <p id="productid">1</p></b>
A <p> element is a paragraph, which by default is a block element.
In this case, you can't use <p> because:
It is not allowed inside <b> elements (because <p> can only be used where flow content is expected, but the content model of <b> is phrasing content). Always remember to validate your code.
Semantically, it's clear that it isn't a paragraph.
I suggest using
<b>Id: <span id="productid">1</span></b>
Demo
#productid{
display:inline-block;
}
p is a block level element by default. You can set it to display inline-block to make it do as you describe using basic css.
I'm not sure if you are unable to access css, so in case you cannot, see oriol's answer. No reason not to just make it a span.
Bit of a side note, it is a little odd to put a p tag inside a b tag. Technically you CAN do this, but it looks like using a span tag is the more proper way to handle this.
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
In one of my divs I need to put a title with a piece of text. But the title needs to be in 3 different sizes.
Like this :
Hello, my name is Anonymous
Do any of you have an idea? Because when I use different < p > classes, it starts a new paragraph.
<span style="font-family:BLA;">Hello,</span>
<span style="font-family:BLO;">my name is</span>
<span style="font-family:BLU;">Anonymous</span>
Use appropriate markup. You don't find multiple paragraphs inside a single sentence, so it makes no sense to use a <p>. Use elements that make sense.
Look at the reason you want to change the font, and use the markup the best describes it. Are you emphasising? Quoting? Defining? Or something else? If HTML doesn't have an element that describes your meaning, then use a span (it is a semantics-free generic element).
Then apply your styles to those elements (you might want to override the default styling on the elements first).
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