Can I add a id to a image in HTML?

Question

I wanted to id a picture in HTML to edit it in CSS, but it doesn't work. Here is the code:

#1{
  border-width: 0px;
  margin: 0px;
  padding: 0px;
  position: absolute;
  width: 25%;
  height: 25%;
}

<img src="https://static1.squarespace.com/static/5492f3e3e4b0c40c56916924/t/586590b3d1758e4aacbf4aa4/1483051196842/?format=1500w" id="1"/>

But the picture isn't formatted the way I wanted to to be. So do I need to add the code into the HTML itself or what do I need to do?

id must start with alphabetical char, like as `id='img1'` for img tag and refer it in css: `#img1` — S.Serpooshan, Jan 08 '17 at 04:56

score 2 · Answer 1 · edited Jul 28 '21 at 22:20

2

You have already defined the id attribute id="1", but this id value does not qualify the following criteria.

Must contain at least one character

Read the HTML5 specification.

But also if you are on HTML 4 the specification says:

ID must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Try with

#myimage
{
    border-width: 0px;
    margin: 0px;
    padding: 0px;
    position: absolute;
    width: 25%;
    height: 25%;
}

<img src="https://static1.squarespace.com/static/5492f3e3e4b0c40c56916924/t/586590b3d1758e4aacbf4aa4/1483051196842/?format=1500w" id="myimage"/>

edited Jul 28 '21 at 22:20

Peter Mortensen

30,738
21
105
131

answered Jan 08 '17 at 04:58

Deep

9,594
2
21
33

@downvoter : care to give a reason as well? – Deep Jan 08 '17 at 05:15
I assume you were downvoted because "1" is a character per the definition used for the word "character". – Anne Jan 10 '17 at 16:08

score 0 · Answer 2 · edited Jul 28 '21 at 22:17

0

It's because you used a number. Switch to something like "one" instead.

Tempted to use something like "1800number_box" for a ID? Don't. Because it won't work. Class identifiers are allowed to start with a number, but ID identifiers are not.

ID’s Cannot Start With a Number

edited Jul 28 '21 at 22:17

Peter Mortensen

30,738
21
105
131

answered Jan 08 '17 at 04:54

rococo

2,280
2
22
37

score 0 · Answer 3 · edited Jul 28 '21 at 22:29

If you will be reusing this style on any other images, you should style it by class instead.

<img src="https://static1.squarespace.com/static/5492f3e3e4b0c40c56916924/t/586590b3d1758e4aacbf4aa4/1483051196842/?format=1500w" class="some-style"/>

Then:

.some-style {
    border-width: 0px;
    margin: 0px;
    padding: 0px;
    position: absolute;
    width: 25%;
    height: 25%;
}

Now you can use this same styling over and over without having to add more to your CSS file, since there can only be one id element per page, but you can have as many elements as you want with the same class.

score 0 · Answer 4 · edited Jul 28 '21 at 22:21

Assuming that you are learning CSS, you would most probably be looking for these two errors:

Your id does not start with numbers: change id = 1 to id="one"
The second possible error is that you are not putting the CSS in the correct area. Put the CSS in <style></style> tags in the <head></head>

For external stylesheets, remember to add this:

<link rel="stylesheet" type="text/css" href="mystyle.css">

score 0 · Answer 5 · answered Jan 08 '17 at 05:12

0

The MDN says:

Note: Using characters except ASCII letters and digits, '_', '-' and '.' may cause compatibility problems, as they weren't allowed in HTML 4. Though this restriction has been lifted in HTML 5, an ID should start with a letter for compatibility.

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

HTML 4.01 spec:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

However, HTML5 spec and the WHATWG HTML Living Standard allows IDs start with digits:

There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.

So I would suggest to stick to the MDN recommendation: For compatibility reasons, don't start your ID or name with a digit. Instead id="1", use something like id="img1".

answered Jan 08 '17 at 05:12

StanE

2,704
29
38

May I ask why my answer was downvoted just a few seconds after I posted it? It's not even possible to read that fast... – StanE Jan 08 '17 at 05:17
I've seen a lot of downvotes by other people posting answers. That shouldn't really be allowed - why would you be allowed to post an answer and be able to downvote someone else's answer to the same question? – Josh Miller Jan 08 '17 at 06:24
Hmm? The only vote I made here was for Benio's answer (because it is quite good and I didn't knew it) - and it was an upvote. – StanE Jan 08 '17 at 06:32
1

I'm saying it's probably someone else who answered who downvoted you to make their answer more likely to be chosen. – Josh Miller Jan 08 '17 at 06:38
Sorry, I misunderstood you. Thanks :-) – StanE Jan 08 '17 at 07:28

score -1 · Answer 6 · answered Jan 08 '17 at 08:37

Try this:

#myimage, img.myimage {
        border-width: 0px;
        margin: 0px;
        padding: 0px;
        position: absolute;
        width: 25%;
        height: 25%;
        }

    <img id="myimage" class="myimage" src="https://pp.vk.me/c837520/v837520867/16752/q1EHBfmdpgQ.jpg">

Also you can try this way :

<img id="myimage" class="myimage" src="https://pp.vk.me/c837520/v837520867/16752/q1EHBfmdpgQ.jpg" style="border-width: 0px; margin: 0px; padding: 0px; position: absolute; width: 25%; height: 25%;">

Can I add a id to a image in HTML?

6 Answers6