Using only with a class but without attributes at all

Question

I used to have this for a button:

<img class="left" src="<?php echo $this->webroot."img/arrowleft.png";?>" width="32" height="31" alt="Arrow left button" />

Now I want to use this:

<img class="left" />

Then with CSS I can put a background image, define the size of the button and do everything that I want 100% with CSS. But I was wondering if it is acceptable and according to proper HTML coding standards to have <img> simply with a class and with no properties at all.

CSS is for presentation. HTML is for content. If you have an img element and don't put a foreground image on it, then you're doing *something* wrong. — Quentin, Nov 08 '18 at 17:55
I think there would be no problem with the browser but.. Why don't you use a div or a button element? — Mark E, Nov 08 '18 at 17:56
@DanFarrell Interesting, you are right, in this case `class` is an attribute. My question should probably be if it is acceptable to use `` without the `src` attribute. — Jaime Montoya, Nov 08 '18 at 17:59
Note: the `` tag does not use or need a closing slash and never has. — Rob, Nov 09 '18 at 23:04

score 4 · Accepted Answer · answered Nov 08 '18 at 17:56

4

From the spec:

The src attribute must be present, and must contain a valid non-empty URL potentially surrounded by spaces referencing a non-interactive, optionally animated, image resource that is neither paged nor scripted.

answered Nov 08 '18 at 17:56

Quentin

914,110
126
1,211
1,335

That documentation is for HTML5. I guess it should apply the same way for previous versions of HTML. – Jaime Montoya Nov 08 '18 at 18:00
1

@JaimeMontoya — Previous versions of HTML are irrelevant unless you are writing for browsers from the last century. – Quentin Nov 08 '18 at 18:01
In that case, your answer would be indisputable based on the official documentation. Thank you. – Jaime Montoya Nov 08 '18 at 18:05

Jaime Montoya · Answer 2 · 2018-11-09T22:59:23.877

0

What I did instead was to use <span> elements:

<span class="left"></span>
<span class="right"></span>

Then I made them work as buttons with CSS by providing a background, corresponding size, etc. So I am using <span> instead of <img> and everything is behaving exactly the same way as before.

UPDATE 1

Following up with @sean's advice in the first comment to this answer, it happened what I thought that would happen:

See the border. Yes, I can remove the border with CSS but those default behaviors sometimes I do not like because what if in some browsers it looks fine without border but only some browsers add that border by default, and sometimes I do not know specifically which browsers add what, but in general I guess only the border should be the thing to worry about in terms of presentation and style.

UPDATE 2

Also, see the dotted lines on the left arrow button. Those appeared after I clicked the left arrow button and this only happens on Firefox. Fortunately, I could apply this answer that I found at How to remove Firefox's dotted outline on BUTTONS as well as links?:

button::-moz-focus-inner {
    border: 0;
}

edited Nov 09 '18 at 22:59

answered Nov 08 '18 at 20:50

Jaime Montoya

6,915
14
67
103

1

If they're buttons, you should use `button` elements instead of `span`. – Sean Nov 08 '18 at 21:01
Very important, semantics matter. I will do that. Thank you for the advice. I hope ` – Jaime Montoya Nov 08 '18 at 21:05
@sean See UPDATE 1 in my answer. But it is fine, I can take care of that by using CSS. – Jaime Montoya Nov 08 '18 at 21:11
Check out [normalize.css](https://necolas.github.io/normalize.css/). It makes rendering pretty consistent across browsers. It won't remove the border, but it should make it so that your CSS override looks the same across browsers. – Sean Nov 09 '18 at 13:37
@sean I did not know about that tool. See UPDATE 2 in my answer for example, another difference I identified, this time only happening on Firefox. – Jaime Montoya Nov 09 '18 at 22:53
Browser discrepancies will probably always be a challenge, but the best way to ensure a consistent experience for users across all browsers/devices is to use the most semantic element available for the job. Be sure to add in your own custom focus states if you remove a browser's default focus state—keyboard-only and other users rely on them to know which element they're currently focused on. A good read on the topic: https://www.viget.com/articles/managing-focus-styles-without-breaking-accessibility/. Good luck! – Sean Nov 10 '18 at 14:10

Using only with a class but without attributes at all

2 Answers2