HTML - Semantic way of displaying images/icons/user interface elements?

Question

Is it true that there are semantically correct & incorrect ways of displaying pictures/icons?
I mean of course it's not very friendly to include all pictures of a newspaper article as background images because that way, screen readers can't read out the alt text, but what about icons or user interface elements? Is it justifiable from a semantic oriented point of view to include these as background-images?

Answer 1

There are some semantically correct and incorrect ways of displaying different kinds of images.

• Normal images It's better to use standard <img> tags, because they are often the main content of a site. These should have alt tags to inform users about important parts of content.
• Icons are a kind of image which isn't the main content of your site, but they should also be displayed by using <img> tags because it's important for usability to show what specific icons do if it's not displayed correctly.
• Not important pictures which make the site nice and are not main content of the site should be displayed as background, because then you do not use unnecessary Nodes in your DOM.