What Are Alternatives to The Span-Element

What are alternatives to the span-element?

First you should look whether some tag matches semantically. For instance, you might have a text which requires emphasis, in which case em is the best choice. Another case is if you have a heading, which you could style with h1, ..., h6. Always first consider this option!

If there really is no meaning to the text you want to style, or at least, not a meaning supported by css, you can use either span (for inline text) or div (for block elements).

Is there any alternative to span?

Just add display:inline-block; in .square class.

body {} img {  width: 100%;}.h {  font-family: "Arial";  font-size: 30px;  text-align: center;  color: #FFF;}.h span {  position: relative;  background-color: #00A0E8;  padding-left: 18px;  padding-right: 18px;  padding-top: 3px;  padding-bottom: 3px;}.square {  display:inline-block;  position: relative;  background-color: #00A0E8;  padding-left: 18px;  padding-right: 18px;  padding-top: 3px;  padding-bottom: 3px;}

<div class="h"><span><b>I WANT</b> THIS</span></div>
<br><br><div class="h">  <div class="square"><b>I GET</b> THIS</div></div>

Alternative to span

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;}

An alternative for div inside anchor tag other than span?

You can alternatively use a pseudo element like :after ... that doesn't add an unnecessary empty tag to the markup:

li a {
    position: relative;
    display: block;
    width: 600px;
}
li p, li a:after {
    width: 300px;
    height: 200px;   
}
li p {
    float: left;
    background: #268388;
    margin: 0;
    text-align: center;
    line-height: 200px;
}
li a:after {
    content:'';
    position: absolute;
    right: 0;
    background: url(http://placehold.it/600x400) no-repeat;
    background-size: cover;
}

I combined the overlapping rules, to make it a bit more dry.

DEMO

When to use span instead p?

You should keep in mind, that HTML is intended to DESCRIBE the content it contains.

So, if you wish to convey a paragraph, then do so.

Your comparison isn't exactly right, though. The more direct comparison would be

When to use a <div> instead of a <p>?

as both are block level elements.

A <span> is inline, much like an anchor (<a>), <strong>, emphasis (<em>), etc., so bear in mind that by it's default nature in both html and in natural writing, that a paragraph will cause a break before and after itself, like a <div>.

Sometimes, when styling things — inline things — a <span> is great to give you something to "hook" the css to, but it is otherwise an empty tag devoid of semantic or stylistic meaning.

Should I use i tag for icons instead of span?

Why are they using <i> tag to display icons ?

Because it is:

Short
i stands for icon (although not in HTML)

Is it not a bad practice ?

Awful practice. It is a triumph of performance over semantics.

What is the difference between HTML div and span elements?

div is a block element
span is an inline element.

This means that to use them semantically, divs should be used to wrap sections of a document, while spans should be used to wrap small portions of text, images, etc.

For example:

<div>This a large main division, with <span>a small bit</span> of spanned text!</div>

Note that it is illegal to place a block-level element within an inline element, so:

<div>Some <span>text that <div>I want</div> to mark</span> up</div>

...is illegal.

EDIT: As of HTML5, some block elements can be placed inside of some inline elements. See the MDN reference here for a pretty clear listing. The above is still illegal, as <span> only accepts phrasing content, and <div> is flow content.

You asked for some concrete examples, so is one taken from my bowling website, BowlSK:

<div id="header">  <div id="userbar">    Hi there, <span class="username">Chris Marasti-Georg</span> |    <a href="/edit-profile.html">Profile</a> |    <a href="https://www.bowlsk.com/_ah/logout?...">Sign out</a>  </div>  <h1><a href="/">Bowl<span class="sk">SK</span></a></h1></div>

Are there better alternatives to my current usage of onclick?

You might consider using event delegation instead - listen for change events on the container of the radio buttons, then use an object indexed by radio button value to determine what display style to set:

const changingContent = document.getElementById("changing-content");const container = document.querySelector('.fieldset-radio');container.addEventListener('change', checkRadioAnswer);
const displayByValue = {  1: 'none',  2: 'block',  3: 'none',  4: 'block'}function checkRadioAnswer() {  const checkedRadio = container.querySelector('input[type="radio"]:checked');  changingContent.style.display = displayByValue[checkedRadio.value];}
checkRadioAnswer();

<fieldset class="fieldset-radio">  <legend>    <h1 class="question-primary">The question goes here</h1>  </legend>  <div class="field-radioButton">    <label for="answer1">      <input id="answer1"        type="radio"        name="genericRadio"        value="1"        checked="checked">      <span>1st answer text</span>    </label>  </div>  <div class="field-radioButton">    <label for="answer2">      <input id="answer2"        type="radio"        name="genericRadio"        value="2">      <span>2nd answer text</span>    </label>  </div>  <div class="field-radioButton">    <label for="answer3">      <input id="answer3"        type="radio"        name="genericRadio"        value="3">      <span>3rd answer text</span>    </label>  </div>  <div class="field-radioButton">    <label for="answer4">      <input id="answer4"        type="radio"        name="genericRadio"        value="4">      <span>4th answer text</span>    </label>  </div></fieldset>
<div id="changing-content">  <p>Content depending on answer goes here</p></div>

What Are Alternatives to The Span-Element