12 most common HTML tag errors in front-end development (not necessarily wrong, but not very good to write)

Developers must be careful when writing HTML code, and be familiar with HTML rules, because there may be some minor errors when one is inattentive, but it can lead to serious consequences.
http://www.iteye.com/news/26074
This article lists some common errors in HTML, and gives you a way to avoid errors. Believe that these methods will be helpful to front-end developers.

Error 1: nested error



It is important to use the end tag of HTML tags correctly, and the order of closing tags for HTML tags is consistent with the start tag, which novice often ignores. If the order is not correct, a validation error occurs and the expected result is not obtained. Therefore, care should be taken to avoid such errors.

Incorrect use:
HTML code

1. <div><p><a>this is my smashing text</P> </div></a>

Correct use:
HTML code

1. <div><p><a>this is my smashing text</a> </P></div>

Error 2: List is not used properly



Sort lists (OL) and non-sorted lists (UL) are often used in HTML, which not only makes entry display more flexible, but also implements many other functions. The correct use of the list tag can be more convenient to display information. However, be careful to avoid using line breaks in your code. The search engine will recognize the list tag, so use the canonical HTML tag, which reduces the probability of a hacker attack.

error 3:form Tag Improper use

Many people can not distinguish between the form and table elements of the difference, do not know which should be defined first, most people first define the table, in fact, such a usage is wrong.

Incorrect use:
HTML code

1. <table><form><tr><TD...  </td></tr></form></table>

Correct use:
HTML code

1. <form><table><tr;.. </tr></table></form>

Error 4: Use block Elements in inline element (inline Elements)



Elements in HTML can be displayed either in an inline area or in a block area. By default, each tag is created in an inline element or block element. Block elements include paragraphs and div in the document, while inline elements need to be placed within the block area. Therefore, when using inline elements, be careful to include them in the block element.

Common block elements (block Elements): HTML code

2. <div>, <h1> <h6>, < p>, <ul >, <ol>, <dl>, < table>, < Blockquote>, <form>    

Common inline elements (inline Elements): HTML code

1. <span, <a, <strong, <em;, < IMG />, <abbr;, <acronym>

Error 5: Omitting the ALT attribute

Images in Web pages are displayed, often using the ALT attribute. Defining the Alt attribute in detail gives you a better view of the picture, or allows you to quickly understand the content of the picture with a slow internet connection or a screen reader. Do not make the following definition: alt= "image", if the picture is just an ornament can use alt= "".

Incorrect use:
HTML code

1. <img src="smiley.gif" alt= "" />

Correct use:
HTML code

1. <img src="smiley.gif" alt="smiley face" width= "height="/>

Error 6: Using errors in bold and italic

Although <b> and <i> are commonly used in bold and italic notation, they are actually semantic representation labels. Therefore, it is best to use a variety of styles in CSS format. For example, in the document you need to highlight the location can use <strong> and <em>. The effect shown is the same as <b>, <i>, but looks more beautiful.

ERROR 7: Unnecessary line break

<br/> marks the line wrapped inside the paragraph, and continues the paragraph in the next line. <p> is the paragraph mark. But many people often use line breaks between elements, and this usage is wrong.

Incorrect usage:
HTML code

1. This is my first paragraph
2. &LT;BR/&gt;
3. &LT;BR/&gt;
4. &LT;BR/&gt;
6. This'll be my test description

Correct usage:
HTML code

1. <p>this is my first paragraph</P>
2. <p>this'll be my test description</P>

Incorrect use of error 8:strik tags



Previous <strike> and <s> used to revise Web page text. But now they are more of a deprecated token. New tags have appeared to replace them, such as <ins> and <del&gt, which are used to display the content inserted and deleted in the document.

Error 9: inline style

Many people complain that inline styles are bad because both CSS and semantic HTML are about style and structure, so using styles directly in HTML is not the best choice.

Error usage:
HTML code

1. <p style="Font-size:14px;font-weight:bol">

The correct way is to use a style sheet.

Error 10: Border

You know, the border property is just an appearance display. Therefore, it will definitely change due to CSS. Don't be surprised if the default borders are scrambled.

Error usage:
HTML code

1. <img src="smiley.gif" alt= " border=" 0 " />

The correct way is defined by the style sheet.

Error 11: Ignore title tag

Header tags are used to divide the structure of documents and separate areas, usually
Error usage:
HTML code< param name= "Quality" value= "High" >

1. <strong>this is my smashing Heading</strong><p>this is my xyz Description. </P>

Correct usage:
HTML code

1. <H1>this is my smashing Heading</H1><p>this is my xyz description. </P>

Error 12: Using <marquee> and <blink>



It can be said that the only role of,<marquee> and <blink> is to make Web pages uglier. If you want to make certain parts of the Web page more visible and interesting, choose a different solution and don't use the text Flash method, because it's really not popular.

English Original: Evil HTML Tag Mistakes you really should avoid the reason that block elements cannot be used in inline elements is "the default style is likely to cause confusion", explained here: http://www.w3.org/html/wg/ Drafts/html/master/introduction.html#restrictions-on-content-models-and-on-attribute-values

But this is not absolute, at least in <a> you can use block elements.

12 most common HTML tag errors in front-end development (not necessarily wrong, but not very good to write)