Not Including Alt Text for Images
When uploading and using images on your website, be sure to include the alt text attribute. This is an all-too-common mistake made by web developers. HTML 4.01 made the alt text attribute a requirement, as it creates a placeholder for images that fail to load. If a visitor lands on your website and is unable to load an image, the alt text attribute will be displayed instead.
The alt text attribute has several other benefits, including its use for search engine optimization. Because search engines are unable to see what an image is, they rely on other signals like alt text to determine what images are about. Furthermore, users who are visually impaired may have speech software that reads images’ alt text.
Using Line Breaks Instead of the Paragraph Element
In most situations, the paragraph element should be used to define a new a new piece of text on a webpage, but many developers make the mistake of using line breaks instead. Line breaks should only be used when you want to place a line of text directly below another line.
See below for an example.
Line Breaks: Wrong
Hello </br> </br> This is my second line of text.
<p>Hello</p> <p>This is my second line of text</p>
Tip: many web developers unknowingly use line breaks when they copy text from a word processor like Microsoft Word and paste it into their website’s visual editor. It may look normal in the visual editor, but checking the code may reveal the use of line breaks instead of the paragraph element. Always double-check the code when pasting text from a word processor into content management system like WordPress.
Using Inline Styles
Inline styles are frowned upon for a few different reasons, one of which is the increased difficulty – and time required – to make changes on webpages with lots of code. If the webpage is small, this shouldn’t be a problem. But if it’s large with several hundred or thousand lines of code, having to edit each element with an inline style is downright tedious.
Opting for a separate CSS file, on the other hand, eliminates this problem by allowing you to make changes to all elements at once. It also allows browser caching, meaning visitors won’t have to load the full page each time they access your webpage (css files are cached in the web browser). Subsequently, this improves speed and deliverability.
Not Closing Tags
Check to make sure your HTML tags have both an opening and closing tags. While certain tags like the paragraph may still render properly in a visitor’s web browser without a closing tag, the majority of HTML tags must be closed.
<p>Oops... I forgot my closing tag
Thanks for reading, follow your passion by finding the perfect course, just for you over on www.stoneriverelearning.com.
GET YOUR FREE HTML5 & CSS3 EBOOK!