Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Shedding light on the most common coding mistakes in HTML

Wednesday, September 3rd, 2014 by Servage

HTML Coding Mistakes

Web developers used to HTML coding, are committing some common mistakes with HTML5. Many of these errors are due to insufficient knowledge of the HTML elements and proper semantics for classifications. Therefore, with this post, I shed light on some common mistakes occurring during HTML coding. Most HTML elements can be classified in three categories: Head, Block, and Text, or inline.

  • Head elements specify info about the whole document through following tags: Title, Meta, Link, Style, Script, Base, etc.
  • Whereas Block elements include: Headings (h1 – h6), address, p, ul, ol, div, pre, hr, table, blockquote, form, etc.
  • Finally, Text or inline elements, mainly consist of text sections and their properties, such as: font markup (sub, sup, b, I, u, big, small, strike, etc.); phrase markup (strong, em, var, cite, code, dfn, etc.); special elements (br, script, map, a, img, etc.); and form elements (textarea, input, select. Etc.)

With understanding of these categories, we look now at the common mistakes committed during web development.

Mistake #1 – Putting Block Elements inside the Text or Inline Elements

Generally speaking, block elements can contain other block elements, as well as text elements. Put another way, block elements and text elements can be nested within a block, but not in text. Therefore, inline elements would never have block elements. As an example, H1 tags could have other H2 – H3 tags as well as link tags (a href=), but inline link tag (a href=) never has block tags (h1…h6) at all.

The reasoning behind this rule is that block elements cause a paragraph break, while text elements never would, unless specifically instructed. Thus, when block elements are introduced inside line elements, they break the flow of the web page and cause disruption in browser rendering.

Mistake #2 – Making Bold and Italic Effects using <b> and <i> Tags

This mistake is made often because we forget that <b> and <i> tags are only used for special cases regarding font markup. Whereas <strong> and <em> text elements are properly used for words or phrases, because they are phrase markup. Technically speaking, font markup is used for the CSS styles of font-weight and font-style, as they are presentation tags. Whereas <strong> and <em> tags highlight text areas directly via HTML.

Mistake #3 – Unusual Line Breaks

Many times we don’t recognize the difference between a line break tag
and paragraph tag

and we misplace them. For example, a line break tag
is only used when we want a break in the flow of paragraph text, to knock a word or two down to a new line, but do not wish to have new paragraph. Whereas

a paragraph tag causes the formation of an entirely new paragraph which can cause bad UX in responsive designing, in particular. Therefore, it is good habit to use

paragraph tags frequently, when we wish to have separate paragraphs, and not employed for isolation of words or phrase.

Mistake #4 – Doing Inline Styling Instead Using CSS

This is the most common mistake found in the coding of many seasoned web developers. They put style tags in block or text elements, that are frequently repeating. They appear to refuse targeting the CSS files, to place these block or heading elements in their rightful place. Proper styling saves documents from becoming fat and unnecessarily complex to comprehend. Keep your styles away from the main document. It is always wise to use separate CSS files, that are externally placed.
References & More Reading
10 HTML Tag Crimes You Really Shouldn’t Commit
Classification of elements

Shedding light on the most common coding mistakes in HTML, 4.5 out of 5 based on 2 ratings
Categories: Guides & Tutorials
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.