(X) HTML - code structure and semantics
The structure of a valid HTML document is based on the logic, order and use of a semantically correct layout. If you have a heading, use Heading (h1-h6) for it, if the paragraph / paragraph is a paragraph (p). If you have a list, use list items (ul / ol); if you quote, use blockquote or cite. These elements give meaning to the markup, making it semantically correct, in addition to the correct structure.
After composing the correct HTML layout, use CSS for visual presentation. (There is already a matter of taste, some make up CSS "on the fly", and some only after creating the HTML layout)
The XHTML standard is stricter to syntax than HTML, it does not allow unclosed tags, single tags must also be closed (self-closing). Items in XHTML are written in lowercase, not capital letters. The attribute values ​​of the elements must be in quotes. There are other differences, but I will not describe them in more detail here.
')
There are two things to keep in mind:
Why semantics? I will bring important aspects in my opinion:
Do not confuse semantics and validity. If the document is valid, it does not mean that it is semantically correct. The validator does not know, for example, that instead of headings you used bold typefaced in CSS, or that your list of links is not a list at all, but paragraphs through line breaks.
By the way, validity, in my opinion, refers to the minimum requirements for the code and is mandatory. And this is not a tribute to fashion, but an order and a tool for self-examination. But this is a separate issue.
Use h1 - h6 elements to style the document headers. Do not try to "fake" the headlines visually with CSS, this is fraught with problems with search engines.
Use the p element to create paragraphs in the text, do not break the line with br. (And remember, in an HTML document, there can be no text that is not “wrapped” in tags). The br element can be used, but you have to do it wisely.
Wrong:
Right:
Use the em element to select text from a general context. If earlier you used the element i, which makes the text oblique, then stop it, since in this case the selection will be purely visual, and in the case of using em, also logical.
The logic of use is about the same as in em / i, with the only difference being that in this case, the selection of the text will carry the semantic background and will be marked in bold.
Wrong:
Right:
The cite element is good for highlighting short quotes inside a text, and is a lowercase element.
The blockquote element is also used for quoting, but will be useful for large quotes placed in separate blocks. It is a block element.
Examples:
Additionally, you can use the cite attribute of the blockquote element to indicate the source of the quote:
If you have lists (for example, a menu is nothing more than a list of links) - use the list items ul / ol, an unnumbered list, and an enumeration list, respectively. Making lists in CSS allows you to achieve very impressive results.
Wrong:
Right:
Definition lists (dl) are created to define something and describe it. Unlike ordinary lists, dl initially specifies dt (definition term) - a term, and then its description / I dd (definition description). Definition lists are suitable for layout dialogs, FAQ pages, technical documentation.
Example:
This article does not pretend to complete the disclosure of the topic, but only reveals some of its aspects. I hope that it will be useful for beginners and hesitant. Bison web development please do not worry :)
The basis of the article is taken from here .
After composing the correct HTML layout, use CSS for visual presentation. (There is already a matter of taste, some make up CSS "on the fly", and some only after creating the HTML layout)
The XHTML standard is stricter to syntax than HTML, it does not allow unclosed tags, single tags must also be closed (self-closing). Items in XHTML are written in lowercase, not capital letters. The attribute values ​​of the elements must be in quotes. There are other differences, but I will not describe them in more detail here.
')
There are two things to keep in mind:
- (X) HTML is intended for content markup and only
- CSS is intended for visual content design.
Why semantics? I will bring important aspects in my opinion:
- Structured code is much better readable by search engines.
- the code will be clear not only to the author, but also to those who will work with him after him
- Working with DOM becomes easier and more accessible.
Do not confuse semantics and validity. If the document is valid, it does not mean that it is semantically correct. The validator does not know, for example, that instead of headings you used bold typefaced in CSS, or that your list of links is not a list at all, but paragraphs through line breaks.
By the way, validity, in my opinion, refers to the minimum requirements for the code and is mandatory. And this is not a tribute to fashion, but an order and a tool for self-examination. But this is a separate issue.
Some basic markup elements
Headlines
Use h1 - h6 elements to style the document headers. Do not try to "fake" the headlines visually with CSS, this is fraught with problems with search engines.
<h1> Main Header </ h1> <h2> Subtitle </ h2>
Paragraph
Use the p element to create paragraphs in the text, do not break the line with br. (And remember, in an HTML document, there can be no text that is not “wrapped” in tags). The br element can be used, but you have to do it wisely.
Wrong:
Mommy was washing the frame <br/> Daddy smoked
Right:
<p> Mommy washed the frame </ p> <p> Daddy smoked accept </ p>
Text selection
em
Use the em element to select text from a general context. If earlier you used the element i, which makes the text oblique, then stop it, since in this case the selection will be purely visual, and in the case of using em, also logical.
strong
The logic of use is about the same as in em / i, with the only difference being that in this case, the selection of the text will carry the semantic background and will be marked in bold.
Wrong:
<p> There is a <i> highlighted </ i> word </ p>
Right:
<p> There is a <em> highlighted </ em> word </ p>
Citation:
The cite element is good for highlighting short quotes inside a text, and is a lowercase element.
The blockquote element is also used for quoting, but will be useful for large quotes placed in separate blocks. It is a block element.
Examples:
<p> <cite> Developer offering crackers, like a cow advertising beef </ cite> - Paradigm.ru </ p>
Additionally, you can use the cite attribute of the blockquote element to indicate the source of the quote:
<blockquote cite = "http://www.w3c.org"> The value of this attribute is a URI that designates a source document or message. This attribute has been borrowed from which the quotation was borrowed. </ Blockquote>
Lists
If you have lists (for example, a menu is nothing more than a list of links) - use the list items ul / ol, an unnumbered list, and an enumeration list, respectively. Making lists in CSS allows you to achieve very impressive results.
Wrong:
<a href="about.html"> About Me </a> <br/> <a href="services.html"> Services </a> <br/> <a href="notes.html"> Notes </a> <br/> <a href="grandma.html"> Grandma </a>
Right:
<ul> <li> <a href="about.html"> About Me </a> </ li> <li> <a href="services.html"> Services </a> </ li> <li> <a href="notes.html"> Notes </a> </ li> <li> <a href="grandma.html"> Grandma </a> </ li> </ ul>
Definition Lists
Definition lists (dl) are created to define something and describe it. Unlike ordinary lists, dl initially specifies dt (definition term) - a term, and then its description / I dd (definition description). Definition lists are suitable for layout dialogs, FAQ pages, technical documentation.
Example:
<dl> <dt> Vasya: </ dt> <dd> And I will still make up tables! </ dd> <dt> Peter: </ dt> <dd> Oh, and fool! </ dd> </ dl>
This article does not pretend to complete the disclosure of the topic, but only reveals some of its aspects. I hope that it will be useful for beginners and hesitant. Bison web development please do not worry :)
The basis of the article is taken from here .
Source: https://habr.com/ru/post/19518/
All Articles