Web browsers are very forgiving especially when they are higher versions; this makes some HTML mistakes go unnoticed. In the journey to becoming a web application developer, the starting point is always HTML and other technologies you learn will build on it. We take HTML mistakes very seriously for our participants at Moat Academy because it is synonymous to building a house on a wrong foundation.
Imagine writing a <p> tag without a corresponding closing tag, your browser may not scream at you, but we will. It is important to know that when building a web application, you are not building it to be viewed on your system alone; it will ultimately be accessed by millions of people after you host it online and you do not have control over the browsers or device they use, so it makes sense to ensure that your HTML pages are free of errors. Below are some of the common HTML pitfalls to avoid:
#1. Missing or incorrect DOCTYPE.
The DOCTYPE (case sensitive) tells the web browsers the version of HTML being used by your webpage. Let the DOCTYPE always be the very first line of your HTML code. HTML5 Syntax is: <!DOCTYPE html>
#2. Missing HTML lang attribute
The lang attribute is used in declaring the language of a Web page or a portion of a Web page to assist search engines and browsers. Syntax is <html lang=”en”> for English, check here for more
#3. Missing Character Encoding
All Web pages should define the character sets they are using; character encoding tells the Web browser the set of characters in use on the page.
A page containing English characters found on typical keyboards will have a different character sets than one that should display Chinese characters. The character encoding tells the user agent (browser or assistive device) what kind of data to read and display. It is done using the Meta tag within the <head></head> section of the webpage. Syntax is:
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
The different parts are explained below:
- http-equiv=”Content-Type” tells the browser what type of meta tag this is
- content=”text/html; tells it that this is an html document that contains text only.
- charset=ISO-8859-1 tells the browser that it is using the ISO-8859-1 character set – which defines common English characters (UTF-8 is a different kind of character set that allows you to use Emoji)
#4. Unsupported tags or attributes <blink> and <marquee> tags are deprecated, may not be supported by all browsers, Do Not Use
#5. Improperly formatted HTML
Missing quotation marks for attribute values: some browsers are forgiving and you can get away with it but does not change the fact that it is WRONG <img src=profile.png> is wrong
#6. Missing closing tags
HTML tags which have opening and closing tag should be used accordingly. Nested tags are when the tags wrap around other tags. They MUST be closed
#7. Improper nesting of HTML tags.
HTML tags must be closed in the opposite order than which they were opened.
<p><span><b>This is my paragraph </b></span> </p>
<li> </li> must be enclosed within a parent (<ol> or <ul>)
#8. Using HTML tags for the wrong purpose
HTML tags should only be used for the purpose they were intended. List tags should be used for lists, <blockquote> for long quotes, <h1>…<h6> tags should be used for headings etc. Formatting tags such as <b> should not be used for placing elements, they should not replace the <p> tag
#9. Table Mistakes
- Creating tables with differing numbers of cells (or rowspan/colspan)in each row. Use colspan or rowspan when necessary to ensure that the cell count remains the same throughout the table rows
- Surrounding table cells or rows with text formatting tags (i.e., <table><b><tr><td>I am bold</td></tr></b></table>)
- Data tables should have a caption, immediately after the opening table tag – <table><caption>Data from Economic Forecast</caption><tr> …
#10. Missing alt attribute in your images
The “alt” attribute when used for your images provides an alternate text for when the image loading is disabled on the browser and it is also used by screen-readers. The “title” attribute is NOT interchangeable with the “alt” attribute
#11. Head content must be within the <head>
<title>, <meta>, and <style> tags must be within the <head> and </head> tags.
#12. Indentation Consistency: To enhance readability, be consistent in your indentation
#13. Missing </body> or </html> tags
These define the structure of your HTML documents and must be in place
#14. Block Level Element Should not be Placed within inline Element:
The form tag is a block-level tag, just like <h1> and <p>. It is wrong to nest it within an inline element.
WRONG<table><form><tr><td>…..</td></tr></form></table>
CORRECT: <form><table><tr>…. </tr></table></form>
#15. Mix quotation marks for attribute values, it is wrong to open with a single quote and close with double quote and vice versa.
Mixing character cases:
#16. It is recommended that you Use only lowercase in your HTML design, including HTML element names, attributes, attribute values.
