What is the meaning of span here? [closed] - html

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I am a new fresher in front end, my basics are really poor. I was reading an example code. The code is like this:
<ul class="list-inline intro-social-buttons">
<li>
<i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span>
</li>
<li>
<i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span>
</li>
<li>
<i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span>
</li>
<li>
<i class="fa fa-fire fa-fw"></i> <span class="network-name">freeCodeCamp</span>
</li>
</ul>
After I checked whether there is a class called network-name, the answer is no. So I want to know what is the meaning of span class="network-name" here?


Span has no meaning. It is a generic inline element with no associated semantics.
I check whether there is a class called network-name,the answer is no.
The answer is "yes". There is an HTML element with network-name in the class attribute. That makes the element a member of that class.
There might not be any CSS that makes use of it. There might not be any JS that makes use of it. The class does exist though.


span is generally used for applying many attributes to inline content. Alone it adds no value at all to the page. If there is no JavaScript, CSS or other code using this class network-name or targeting the span element directly then it will make no difference if these span are removed.
See the HTML span tag W3C documentation.


The span tag is used to group inline-elements in a document.
The span tag provides no visual change by itself.
The span tag provides a way to add a hook to a part of a text or a part of a document.
The tag also occupies only the space it needs to display what it contains
check W3Schools Span Definition and usage
As for the class="network-name" check the head of the document where you got the code its surely linked to some online style sheet(most likely Bootstrap)

Related

Odd rendering for font-awsome

From time to time after page refresh fontawesome icons get this rendered this way:
When they should look like this:
Is there anything I am missing my html or CSS?
This is the HTML to display each of those menu options is as simple as:
<li class=""><a ui-sref="Resources" title="Resources">
<i class="fa fa-lg fa-fw fa-globe"></i>
<span class="menu-item-parent ng-binding">Resources</span>
<b class="collapse-sign"><em class="fa fa-plus-square-o"></em></b></a>
</li>
The parent elements for the menu are:
<aside id="left-panel"><nav nav-menu="" stopwatch="true">
<ul><li><!--menu time --></li>

It seems something like mojibake. It could depend on the files (css and html) or document encoding. The file one should be utf-8 without bom.

Inline css for modern days?

I have a html webpage containing with lot of css. Let's say if I have one style per div, do I need to add it to my external css file or just write internal css inside of that html page?
Take a look at this example.
<div class="sub">
Link <i class="fa fa-user-circle-o" aria-hidden="true"></i>
</div>
I need to add two different colors to "link" and icons. I can simply do this way.
<div class="sub">
<a href="#"> <span style="color:red"> Link </span>
<i class="fa fa-user-circle-o" aria-hidden="true" style="color:black"></i></a></div>
Or can add classes and write it to external css also.
<div class="sub">
<a href="#"> <span class="color-1"> Link </span>
<i class="fa fa-user-circle-o" aria-hidden="true" class="color-2"></i></a>
</div>
I know those two methods are working but need to know the best practice for this type of situation. Internal or external?

In a short answer:
As far as possible don't use inline style, because inline style has Highest priority after !important keyword.when we have too many lines and use of inline style, it is very hard if we want to find and overlay it.

Actually it's a good practice to have your CSS in external, but it depends upon the situation. For this, it is best to use inline CSS.

Is this '<dropdown>' tag a custom HTML element?

I was going over this codepen and I saw this <dropdown> tag. I dont know if this is a legit tag like <div>, <span>, <section> etc..
<dropdown>
<input type="checkbox" id="toggle1" checked>
<label for="toggle1" class="animate">Editor <i class="fa fa-list float-right"></i></label>
<ul class="animate">
<li class="animate">Source <i class="fa fa-code float-right"></i></li>
<li class="animate">Fullpage <i class="fa fa-arrows-alt float-right"></i></li>
<li class="animate">Debug <i class="fa fa-cog float-right"></i></li>
</ul>
</dropdown>
I think Xml allows you to have custom name for tags/ DOM elements but I don't think the author is using Xml.
I think the author made up his own element that describes the section that he is writing about. I didn't know you could do this. I also saw <time> one time being used in html. Can someone explain to me about how it's ok to make up your own tag names or show me documentation. I'm assuming this is an html thing

There is no dropdown element in HTML5 standard set.
HTML5 allows custom elements if they contain '-' in their names. So they'd better use <drop-down>...</drop-down> .

<dropdown> is not a valid HTML tag. Not sure where you get this piece of code from, but you should avoid using custom tag. Use class selector / ID selector instead.
On the other hand, <time> is a HTML tag in HTML5 specification. Documentation is here.

Why isn't this valid XHTML?

I'm trying to put a block of HTML into a field in a content management system, but it keeps stripping out one of the elements. In particular it is stripping out the <i class="sprite arrowDDnav"></i> from the block below.
<a class="static selected menu-item rootActive" href="/community/presbyterian-healthcare-foundation/Pages/default.aspx">
<i class="sprite arrowDDnav"></i>
<span class="additional-background">
<span class="menu-item-text">Presbyterian Healthcare Foundation</span>
<span class="ms-hidden">Currently selected</span>
</span>
</a>
Any idea why this might be? And any idea how I can "trick" the CMS into preserving the above HTML, or should I resort to using JQuery and document.ready(...) to inject the element in the appropriate place?

How do I make Font Awesome WCAG 2.0 compatible?

If I have a site with a couple of font awesome icons on it, e.g.
<i class="fa fa-fw fa-cloud "></i>
And run this through the WCAG 2.0 validator I get the following error:
Success Criteria 1.4.4 Resize text (AA)
Check 117: i (italic) element used.
Repair: Replace your i elements with em or strong.
Error Line 185, Column 158:
<i class="fa fa-fw fa-cloud"></i>
I realize that the rule shouldn't really apply in this case, as it is there to ensure that <em> and <strong> are used instead of their non-semantic counterparts <i> and <b>. But the problem still exists if I have a client that requires me to check all the WCAG2.0 boxes.
So does anyone know what would be the proper way. Should I change them to <em> instead, does that give screen-readers any difficulties? Any other suggestions are welcome!

First, <i> does have semantic meaning in HTML5 (but was only presentational before that). Assuming you're using HTML5, the validator you're using is wrong to flag all occurrences of <i> as inappropriate.
Second, changing
<i class="fa fa-fw fa-cloud"></i>
to
<span class="fa fa-fw fa-cloud"></span>
is good but it doesn't fix the real accessibility issue, which is that you don't have any text alternative to the icon (at least it appears that you don't). For the sake of argument, let's assume your fa-cloud icon is inside an <a> tag. Something like this (using Bootstrap's sr-only CSS class):
<a href="...">
<span class="fa fa-fw fa-cloud" aria-hidden="true"></span>
<span class="sr-only">Download</span>
</a>
or like this (using WAI-ARIA's aria-label attribute):
<a href="..." aria-label="Download">
<span class="fa fa-fw fa-cloud" aria-hidden="true"></span>
</a>
is the solution. Even simpler would be to show the text to everyone:
<a href="...">
<span class="fa fa-fw fa-cloud" aria-hidden="true"></span>
Download
</a>

from font-awesome doc:
You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements (we like the 'i' tag for brevity, but using a 'span' is more semantically correct).
So, you could try changing your 'i' tags for 'span'.

It very much depends on what the content is inside the i tag is semantically. WCAG2.0 is a set of guidelines, not hard and fast rules.
According to the HTML5 spec:
The i element represents a span of text in an alternate voice or mood,
or otherwise offset from the normal prose in a manner indicating a
different quality of text, such as a taxonomic designation, a
technical term, an idiomatic phrase from another language,
transliteration, a thought, or a ship name in Western texts.
From: http://www.w3.org/html/wg/drafts/html/master/text-level-semantics.html#the-i-element
If the content is something that needs to be "emphasises" then, no use the em tag as that is semantically correct across all user agents. The example on the spec, with a Latin technical name for an animal, is a perfect example of something that would be italicized, but not emphasised (although visually they would look the same).
<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>
Would be styled:
The Felis silvestris catus is cute.
So, if you can justify why the text is "italic", but not emphasised, keep it as is, otherwise change it to a semantically appropriate tag.

Adding to danielnixon answer (+1): if I want to use a fontawesome icon as a decorative thing in the UI (not a link, button, etc), I add a span with a wai-aria attribute:
<span class="fa fa-small-arrow" role="presentation"></span>