As Robots said: “and if it’s no joke, ..., it is better for amateurs to read and learn, and leave the creation of topics to professionals.”



In the course of many articles that were later called “unprofessional”, I put all points for future writers on ... So that there would be no more complaints in your direction.



Delka (Zenich Igor) struggled more than once for the semantic nature of the code, which is written in articles and which can later be used as a kind of primer, thereby making it possible to increase errors.

')

In this article I have combined (compiled) the thoughts already expressed ( ! ) Of many people, but for some reason they have not been conveyed to the majority. (www.flack.ru, www.pepelsbey.net and some others)





(All practical comments will be included)



Original article on temporary.

Part 1. Theory.

Semantics - the science of understanding certain characters, sequences of symbols and other conventions;



At the moment we are talking about semantics in HTML-layout. Therefore, we will certainly not carry out all its connections with linguistics.



First of all, semantics in layout is a set of semantic relations arising in a document. However, the existence of such relations requires a document that arises due to the implementation of HTML markup in plain text.



Semantics is impossible without validity, despite the obvious difference between these two concepts. You can create a valid site, but without structural markup it will be just populism.



Also, semantics is impossible without the introduction of microformats into the code.

Microformats are a way to embed specific semantic data in HTML.



But stop, that's not all. It is necessary to say that semantics as such is divided into three sections, which all three should be considered:

• Proper use of HTML elements;
• Name of elements;
• The combination of named elements;

Conclusion of the part : Therefore, for those who are in the tank, let’s think before you upload your codes.

Part 2. Before practice.

What the layout should begin with is to specify the correct DOCTYPE.

According to the HTML and XHTML specifications, the DOCTYPE tag (which means “document type declaration”) tells the validator which version of (X) HTML you are using in your page. This tag should always be in the first line of each page. The DOCTYPE tag is a key component of web pages that claim to conformity to standards: without it, your code and CSS will not pass the validator check.



All the details have long been carefully described by Jeffrey Zeldman in the translation of Max Rossomakhin " Why the DOCTYPE is so important "

Part 3. The "beginning"

Since we want to achieve not only valid semantic markup, but also cross-browser, I recommend using “reset styles”. To do this, use the article by Eric Meyer .



So. In order to finally make sure what certain elements are used for (if you are not sure;) you should refer to the HTML 4.01 specification .



Fragment specification on the element ADDRESS:

The ADDRESS element may be used by authors to supply contact information for a document or a major part of a document such as a form. This element often appears at the beginning or end of a document.



In addition: POSH - Plain Old Semantic HTML - (use of HTML elements for their intended purpose) - “good old semantic HTML”.

Part 4. Learn to think.

Well. Let's give an example. The simplest thing is to have this simple, unordered list. Most often this site menu. How can you create it, keeping in your head “the layout of divas, the naming of elements ...”

1<br>

2<br>

… <br>





Now let's look at the specification and choose what is most suitable for us to semantically correct solution of this issue.

We select an unordered list c , — CSS. ? : , , .



3 :

ADDRESS.

, ivan@exmail.ru

, . , , . , HTML-:



ivan@exmail.ru

, :



ivan@exmail.ru list c , — CSS. ? : , , .



3 :

ADDRESS.

, ivan@exmail.ru

, . , , . , HTML-:



ivan@exmail.ru

, :



ivan@exmail.ru c , — CSS. ? : , , .



3 :

ADDRESS.

, ivan@exmail.ru

, . , , . , HTML-:



ivan@exmail.ru

, :



ivan@exmail.ru

c , — CSS. ? : , , .



3 :

ADDRESS.

, ivan@exmail.ru

, . , , . , HTML-:



ivan@exmail.ru

, :



ivan@exmail.ru

c , — CSS. ? : , , .



3 :

ADDRESS.

, ivan@exmail.ru

, . , , . , HTML-:



ivan@exmail.ru

, :



ivan@exmail.ru

c , — CSS. ? : , , .



3 :

ADDRESS.

, ivan@exmail.ru

, . , , . , HTML-:



ivan@exmail.ru

, :



ivan@exmail.ru

c , — CSS. ? : , , .



3 :

ADDRESS.

, ivan@exmail.ru

, . , , . , HTML-:



ivan@exmail.ru

, :



ivan@exmail.ru

c , — CSS. ? : , , .



3 :

ADDRESS.

, ivan@exmail.ru

, . , , . , HTML-:



ivan@exmail.ru

, :



ivan@exmail.ru

c , — CSS. ? : , , .



3 :

ADDRESS.

, ivan@exmail.ru

, . , , . , HTML-:



ivan@exmail.ru

, :



ivan@exmail.ru

c , — CSS. ? : , , .



3 :

ADDRESS.

, ivan@exmail.ru

, . , , . , HTML-:



ivan@exmail.ru

, :



ivan@exmail.ru

The further, the more difficult. Recall (well, if we don’t remember, then read) on the hCard microformat. We use the root class, specifying the name, surname and e-mail.

<h1 class=”fn n”>







ivan@exmail.ru



So we got a full business card. And yet: hCard is a clone of the good old vCard , the electronic business card format, in XHTML terms. It is infinitely simple to implement: it creates (or changes the current) element (usually a div or span) with the name of the vcard class (attribute value = = vcard). It creates child elements with class names corresponding to the vCard / hCard fields.

The site Sphinx.net.ru describes in some detail other aspects of the introduction to microformats .

Part 5. Do not forget the smaller brothers. IE and its quirks.

We have learned to think, have learned, we are starting to act, but the problem is, in IE everything is not as it should be. We think further. There are two ways out of this situation:

• "Star html hack";
• conditional comments;

The first is “star html hack”. In short:

#element {

position:relative; /* x */

}

* HTML #element {

position:static; /* IE */

}



Details have long been waiting for you . But do not forget that such hacks for the Internet Explorer browser litter the code loaded by all other browsers.



The second is conditional comments. Or more simply, the usual connection of CSS files, but only IE visible.

/>

< !--[if IE] >/>< ![endif]-- >

Details there .

Part 6. ID and class.

First, let's understand what an ID is, what a class is. ID is the name of the unique element, class is the common name of the set of elements and, accordingly, their common semantic role.



Therefore, it is more convenient to use ID to describe structural markup.

…

…

…



When naming it is important to remember about multiple classes for a single element. For example:





From here it becomes clear the following: that this link leads to the website (url) of the organization (org) called (fn) “Yandex”.



Thus, using id for structural markup, we create certain namespaces, thanks to which we can address the use of styles for elements with the same semantic roles and, accordingly, class names.



Semantically correct naming of HTML elements using id and class attributes, besides the semantics itself, introduces orderliness not only in the document itself, but also in the development process.

Part 7. Learn more about microformats and a combination of named elements.

• Microformats - official blog and wiki documentation
• Microformatique - John Allsopp's blog
• Microformats - about microformats in Russian on Khabrhabr

Example of use written by Vadim Makeev :



Markup user name and a small icon next to that used in the blogging service Livejournal.com. This is how it looks now:

<span class='ljuser' lj:user='kuteev' style='white-space: nowrap;'>

<img src='#' alt='[info]' width='17' height='17'

style='vertical-align: bottom;

border: 0; padding-right: 1px;' />



kuteev





Useful:

• The username is not transferred, for white-space: nowrap
• Tadpoles leveled vertically, turned off his frame, indent and set the dimensions - width = '17 'height = '17' style = '...'
• Kuteev, it turns out, bold, since kuteev

But what can be done using hCard microformat:

<a href="#" target="_blank"

class="ico" title="">





<a href="#" target="_blank"

class="fn nickname url" title="">

kuteev



What is new we can now learn:

• We are dealing with a mini-business card Kuteev, because the class = "vcard"
• The link from the tadpole leads to the profile - we clarified the title = "Profile"
• Kuteev's nickname is kuteev, we see class = "fn nickname"
• The link from the nickname leads to the site of Kuteev - class = "nickname url", or rather, to the journal, - we clarified the title = "Journal"

Accordingly, all the information from the above examples becomes available to search engines and plugins of your browsers, since its markup is formalized in the hCard microformat specification .

Part 9. And so!

Let's all the same, read the original articles, learn by heart and will not do more nonsense:

• Semantic layout. Part one
• Semantic layout. Part two
• Semantic layout - tips and solutions. Part one. Drop theory, DTD and erasers
• Semantic layout - tips and solutions. Part two. Khaki-Shmaki, give lyuley IE
• Semantic layout - tips and solutions. Part Three Block model
• Semantic layout - tips and solutions. Part IV. Creating “rubber” layouts using negative fields>
• Semantic layout - tips and solutions. Part V. Site Navigation or Taming Lists