HTML and CSS Reference
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.
1. <img src="puppy.jpg">
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.
1. <p style="color: #393; font-size: 24px;">Thank you!</p>
1. <p class="alert-success">Thank you!</p>