HTML and CSS Reference
In-Depth Information
Use the Alternative Text Attribute on Images
Images should always include the
alt
attribute. Screen readers and other accessibility
software rely on the
alt
attribute to provide context for images.
The
alt
attribute value should be very descriptive of what the image contains. If the image
doesn't contain anything of relevance, the
alt
attribute should still be included; however,
the value should be left blank so that screen readers will ignore it rather than read the name
of the image file.
Additionally, if an image doesn't have a meaningful value—perhaps it is part of the user
interface, for example—it should be included as a CSS background image if at all possible,
not as an
<img>
element.
BAD CODE
1.
<img src="puppy.jpg">
GOOD CODE
1.
<img src="puppy.jpg" alt="A beautiful, two-year-old hound mix puppy">
Separate Content from Style
Never, ever, use inline styles within HTML. Doing so creates pages that take longer to load,
are difficult to maintain, and cause headaches for designers and developers. Instead, use
external style sheets, using classes to target elements and apply styles as necessary.
Here, any desired changes to styles within the bad code must be made in the HTML. Con-
sequently, these styles cannot be reused, and the consistency of the styles will likely suffer.
BAD CODE
1.
<p style="color: #393; font-size: 24px;">Thank you!</p>
GOOD CODE
1.
<p class="alert-success">Thank you!</p>
Search WWH ::
Custom Search