What you should not forget when you make up HTML
When you make up (X) HTML, sometimes you don’t know or forget about the many features that you should use. I will list those that I always forget myself, but in vain :)
1. <label> tag
A very useful thing that greatly increases the usability of the site. Defines the label for a form element, i.e. if you click on its contents, the checkbox (button) is set (removed), the cursor is placed in the text field, etc.
The only parameter needed is: for, which contains the id of the element to which the label refers.
Example:
2. <link> tags
In addition to links to CSS pages, it can contain a lot of interesting things (by the way, I saw the support of this interesting only in the opera (well, maybe there are firefox plugins for this) :( but it would still be worth it). For example, in the attribute rel can stand:
etc.
')
3. lists (<ul> - <li>)
If we have several of the same type of entities on the page, for example - links in the table of contents, it is worth making them into the list. Even if they are standing horizontally or in a circle, put them on the list and draw them up with CSS. Then your page without styles will not look so miserable.
4. styles and structure
An HTML document should describe only data and nothing but data, except references to what shows how to visualize this data. Those. on CSS and JS, rendered in separate files.
This paragraph speaks of three things at once: firstly, all CSS and JS should be put into a separate file, secondly, all class names and id elements should be given only by content type, but not by style, and thirdly, you should never impose labels (because the labels are for tabular data), get involved <b> instead of <strong>, etc., and also make divs and spans everywhere where you can put a list ( see p3), the header (<h [1 ..]>) (by the way, for some reason everyone runs around, although it would be worth using them for headings always, even if you have to go to CSS (yes, it’s in CSS! No way of design in html!) to make the text invisible, and deliver to the picture) or even some "honest" element.
To make it easier to follow this rule, put webdeveloper on firefox and press ctrl-shift-C (CSS → disable styles → all styles).
Yes, and adding from b2k : do not prescribe styles by id
5. mnemonics
Do not put in the text (tm),, ->, if there is,, →. Especially not to use pictures.
Here is a list.
6. strict
Always type in strict! It's easy, but interesting;)
7. frames
If you need a frame that is not in HTML (there is no such element in the standard ... well, almost;), use not the <frame> tag, but the <object> tag.
8. Work and result should be enjoyable.
If you look at the site and the code, and say to yourself: “Gospadi, how many hacks, opera raccoon” or “Oh, horror, if you enter it here or rearrange it all again :(”, then erase it all and write again.
When I write beautiful valid code, I am pleased with myself. And this is not an orgasm after sekas with browsers :)
9. The code must be ready for analysis by the machine.
Instead of creating an API, you can make the page understandable for analysis with all sorts of XML parsers, etc.
PS I will be glad to any additions, I will immediately bring them here.
1. <label> tag
A very useful thing that greatly increases the usability of the site. Defines the label for a form element, i.e. if you click on its contents, the checkbox (button) is set (removed), the cursor is placed in the text field, etc.
The only parameter needed is: for, which contains the id of the element to which the label refers.
Example:
<label for = 'login'> Login: </ label> <input id = 'login' />
2. <link> tags
In addition to links to CSS pages, it can contain a lot of interesting things (by the way, I saw the support of this interesting only in the opera (well, maybe there are firefox plugins for this) :( but it would still be worth it). For example, in the attribute rel can stand:
- 'alternate' - defines the document in other versions, for example - in RSS (in which - depends on other attributes).
- 'start', 'next', 'prev' - defines other documents from the list if there are many of them and they have order (as in business linch, for example)
- 'copyright' - the address of the page with copyright, for example in Wikipedia there is a link to the GPL
etc.
')
3. lists (<ul> - <li>)
If we have several of the same type of entities on the page, for example - links in the table of contents, it is worth making them into the list. Even if they are standing horizontally or in a circle, put them on the list and draw them up with CSS. Then your page without styles will not look so miserable.
4. styles and structure
An HTML document should describe only data and nothing but data, except references to what shows how to visualize this data. Those. on CSS and JS, rendered in separate files.
This paragraph speaks of three things at once: firstly, all CSS and JS should be put into a separate file, secondly, all class names and id elements should be given only by content type, but not by style, and thirdly, you should never impose labels (because the labels are for tabular data), get involved <b> instead of <strong>, etc., and also make divs and spans everywhere where you can put a list ( see p3), the header (<h [1 ..]>) (by the way, for some reason everyone runs around, although it would be worth using them for headings always, even if you have to go to CSS (yes, it’s in CSS! No way of design in html!) to make the text invisible, and deliver to the picture) or even some "honest" element.
To make it easier to follow this rule, put webdeveloper on firefox and press ctrl-shift-C (CSS → disable styles → all styles).
Yes, and adding from b2k : do not prescribe styles by id
5. mnemonics
Do not put in the text (tm),, ->, if there is,, →. Especially not to use pictures.
Here is a list.
6. strict
Always type in strict! It's easy, but interesting;)
7. frames
If you need a frame that is not in HTML (there is no such element in the standard ... well, almost;), use not the <frame> tag, but the <object> tag.
8. Work and result should be enjoyable.
If you look at the site and the code, and say to yourself: “Gospadi, how many hacks, opera raccoon” or “Oh, horror, if you enter it here or rearrange it all again :(”, then erase it all and write again.
When I write beautiful valid code, I am pleased with myself. And this is not an orgasm after sekas with browsers :)
9. The code must be ready for analysis by the machine.
Instead of creating an API, you can make the page understandable for analysis with all sorts of XML parsers, etc.
PS I will be glad to any additions, I will immediately bring them here.
Source: https://habr.com/ru/post/19362/
All Articles