Recommendations for writing HTML code to novice web developers

Obvious things that are highlighted for themselves. It would be desirable, that competent people have added this small list. The goal is to make the code and yours and others more beautiful, valid, easily understood and semantically literate.

Using the <br /> tag

Basically it is necessary to improve the perception of the text, more precisely, to format a single element. Therefore, when we need to separate several elements or just to have a new element in a new line, we need to use a block element (div, p, h1 ..., for which the default css property is display: block, but do not try produce unnecessary elements). And if you need to indent, you do not need to insert ten <br>, but you need to describe the margin property in css.

Using the style attribute and the! Important property

This is necessary in exceptional cases when the place is unique. Almost always you need to use a css-class with properties rendered in a css-file. And even if you need to hide an element (display: none), it is better to create a universal class (for example, css: .hidden {display: none;}), and write <span class = ”error hidden”>.
In the class description, if you don’t use any property, you don’t need to write! Important, most often it’s enough to finish writing the parent selector, and preferably class, rather than id.

')

Outdated HTML elements and attributes

<CENTER>, <FONT>, border, color, cellpadding, cellspacing, width (for tables)
All of them are replaced by properties in CSS, so do not use the above elements. Also, the name attribute for XHTML is not valid - it does not need to be used (everything is done through id).

<Label> element

Specifically, to describe the purpose of the input there is a <label> element (in HTML5, you can use the placeholder attribute for this purpose). Therefore, wherever there is input, almost always, there must be a <label for = ”input_id”>.

Unbreakable space and word wrap

Try to anticipate the possibility of hyphenation and, where appropriate, use & nbsp; to prevent a break. If the content is dynamic and you need to keep it in one line, you can use the css-property that prevents the transfer of words to a new line - white-space: nowrap;

Button layout

On the right should be the most likely button to click. (For example, 1.Cancel 2.Ok), this does not apply to the output of information - there must be the most important thing ahead. But since the user checks all possible actions, it is not necessary to force him to go back, even with a glance.

The names of the columns, buttons, actions

Try to adhere to the rule - a separate element - a new sentence and accordingly - write it with a capital letter (Submit, Order now). Also, do not need to write the entire title word, sentence or paragraph. If necessary, there is a text-transform css-property: uppercase;

Underline and highlighting

Do not underline any items other than links. To select, use <strong>, <em> with the corresponding css-properties font-weight: bold, font-style: italic, or change the font itself. If the semantically fragment is not highlighted, but only visually, use <span>.

This may not have included more obvious things, such as formatting or how to choose names for id elements, but this, in my opinion, relates to the style, and not to the culture of writing code. CSS may not need everyone to know the details, but the structure of an HTML document must be understood by all developers.

I hope this article will be useful and updated / corrected by your comments.