<img src="[/files/Subscriptionad4.jpg](http://test.scic.com/files/Subscriptionad4.jpg)" width="338" height="250" border="0" style="border: 0" />
Is the above advisable? Can I omit either the border attribute or the style?
Yes, you can and should (imo) omit both of them as the img element can be styled externally.
In “modern” code, THERE IS NO BORDER ATTRIBUTE… or more specifically, HTML 4 Strict or XHTML 1.0 Strict… likewise as a rule of thumb using the style attribute is also bad code since most of the time it’s just bloat… since it’s not cached across pages like CSS in an external stylesheet is.
That’s for all intents and purposes presentational markup – welcome to the bleeding edge of 1998 coding practices – or 2012 coding practices if you’re jumping on the HTML 5 bandwagon which is setting coding practices BACK a decade or more… so unless you’re in “transition” from 1997 to 1998 using a tranny doctype, or jumping the gun with the idiotic HTML 5 nonsense flushing the past decades progress down the toilet…
But again, I’m the nutjob who wants to see STYLE obsoleted as a tag and deprecated as an attribute in all but one or two scenarios… like when style is used to help convey content; a rare situation indeed.
I think that you should consider adopting the following style:
// stylesheet.css
img (border:0; outline:0)
#unique dimensions {width:338px; height:250px}
.common_image_dimensions {width:338px; height:250px}
// Html
<img
src = '/files/Subscriptionad4.jpg'
id = 'unique dimensions'
class = 'common_image_dimensions'
alt = 'benefits SEO'
title =' appears when a user hovers over the image'
/>
Please note that either an #id or a .class can be used or both.
// edit: spelling not my forty
A couple of things I’d like to annotate.
a) outline:none should not be used. You’re alienating people who use keyboards and break the functionality of :focus. This article offers a good explanation.
b) I’d only use an extra class or ID if absolutely necessary. In many cases (particularly for smaller sites) it’s often not needed as most images are contained within another element. I’d actually keep the width and height attributes within the img tag because it prevents the site from jumping around while calculating the width and height of an image. This is a somewhat controversial matter as there are quite a few people who say that width and height don’t belong in the HTML but rather in the CSS. I prefer to have it in the HTML instead and not in the CSS in order to have the needed width and height set before the image loads fully.
c) Instead of SEO benefit, I’d write UO (user optimization) benefit. If the alt attribute is well described, then it helps a user. And if the text is concise, then it’ll be easy for search engines as well, though SEO marketing experts might disagree.
d) And lastly, I don’t see why one would use a title in the img tag? If the image needs more description, then I’d use a caption for it.
Invalid ID, you can’t have spaces 
classes are better off used to say WHAT it is, not what it’s going to look like… Using classes that say what things look like you might as well go back to using presentational markup.
There is no legitimate reason to put title on an anchor… waste of bandwidth, waste of markup – similar to the nonsense you’ll see all the time with TITLE on anchor that’s identical to the text inside the anchor – which is about as silly as things can get. (yes wordpress, I’m looking at you along with the rest of their idiotic retard markup) … now, if the title is DIFFERENT from the content… well… then there’s something wrong with the content of the anchor
… also, single quotes are for server side, not client side (valid, doesn’t make it good practice) and it’s actually a bad idea to omit width and height – declaring them in the markup lets them size BEFORE rendering starts – and if you’re using IMG tags for content images only stating the size provides your placeholders for when CSS is disabled, not present or not available to the media target. This is why WIDTH and HEIGHT on IMG are NOT considered presentational markup or deprecated – unlike BORDER.
Though I like the one attribute per line approach – I use that myself.
I believe you mean forte ante? dante? bueller?
a) point taken and will removed default outline in my style sheets.
b) I think it is personal preference and also think that it is better otherwise the browser may/will have to use the newly found image dimensions to rendering the page correctly.
c) I think the alt tab is only visible to the user if the image does not show or maybe if the image is very slow on loading. I also think that the alt is definitely used by SEO.
d) Yes I agree but it is handy to draw attention when the title and/or long decription pops up.
@deathshadow60
You spotted my deliberate mistake 
Actually the ID description was copied and pasted instead of having ‘unique_dimensions’ joined with an underscore.
The class names were for the benefit of @MrBaseball34 and only meant to be make the example easy to understand.
As mentioned previously about using a title - “draw attention when the title and/or long decription pops up.”
The “single quotes on the server side” is new to me and force of habit using PHP. I agree with your comments about using width, height and border.
Yes I prefer code which is easier to read and also for editing, it is far easier to rem or cut and paste a separate line.
“edit: spelling not my forty” - I think you missed the humorous point I was trying to make, never mind I will try again later
.
I agree with the modification of the img style. If an image requires a border, it is best to style it separately because the majority of the images on our site do not need them shown.
Arg.
<img
...
alt = 'benefits SEO'
title =' appears when a user hovers over the image'
/>
That “benefits SEO” is exactly the reason why some people turn OFF the reading of alts in their screen readers on some sites. ALT has no more influence on “SEO” than ANY other plain text (it is equivalent to the plain text around it, just as you see when you don’t load images in a Gecko browser). You are using alt because you love your users who either can’t see, or don’t/can’t load the image. That is the only reason you are using alt, period. If you are even slightly THINKING about “SEO” or “Google” or anything smelling vaguely of dark marketing sleaze, back away from the keyboard and let someone who cares about users write that text instead. I’m serious, I run across a lot of redundant redundant redundant for SEO alt text, and it sucks. Really destroys the browsing experience.
Sure, but I don’t see any anchors here. This is an image, not an anchor.
That said, title is RESTRICTED to mice. If you’ve got something so important to say that you bothered writing it in a title attribute, why are you leaving out keyboarders and touch screen users??? Title is poorly implemented in browsers, relying on a single device alone, which is why it should either be fixed or removed (from browsers) in my opinion. (Steve Faulkner has a wonderful rant about this somewhere at Paciello Group.) Yes, even though in non IE<9 browsers you can kinda get around this with CSS, provided you then wrap a focusable anchor around the image… but then why would you do that if the image wasn’t a link? So, title still sucks monkey balls.
Though there might still be a use case of users who are used to IE’s old bug where it would display the alt text as a tooltip when the image is hovered. I’ve heard stories of users who were already used to that missing it and it seems they relied on that for some kind of confirmation… of something… so we may use title=“” to stop the IE bug, and then be sensible and add an actual caption as well as the alt as kohoutek said.
Though removing “outline” from images is an even sillier waste of code: images don’t even have an outline (nor do they get keyboard focus). Anchors do. But if this were an anchor, then 100% agreed. Though recently you can see DuckDuckGo has removed (a temporarily implemented) outline exactly because some user said they were ugly: https://duck.co/topic/testing-new-visual-design-iv (in the comments, someone posts a screenshot). You can see “pretty” will always trump accessibility and usability, every time. This is why the words “pixel-perfect” are still seen regularly in job ads for front-end web developers. Unfortunately. The graphics weenies have won. The disabled have lost. (I mean seriously, if they didn’t like default outline, they could have EASILY just added in the CSS and Javascript to set a more desirable focus colour. Instead they just went the nuclear option in many cases)
I agree with this from experience. We were being sent images of all different sizes and needed to float a container around them, set to their width. Too many id’s ensued. Later we said, screw that, imagemagick for the win. Now we have two classes for two large widths, and “thumb” for thumbnails. Way easier.
Also, there is no shame in setting heights and widths in images in the HTML. This is not presentational: it is the actual size of this file. It gets presentational when you set it to something you want that isn’t true. For that case, use CSS. Setting dimensions in the HTML however are beneficial to the rendering engine as Crusty already mentioned… though if this ends up being a pain in the butt due to how your back-end code is set up, no biggie. Browsers’ll just have to redraw. It’s okay, we all got mad CPU right?
I thought it was hilarious. It’s like
BAD SPELLERS OF THE WORLD, UNTIE!
I meant image, typo… which is why I went on to compare to anchors… MOST of the time they don’t belong on EITHER.
Which is kind of the point – if it’s important enough to be in the markup as TEXT, put it in the markup as CONTENT TEXT instead of hiding it in an attribute!