Florent launches the project to write a stylistic guide (editorial guidelines or Conventions of coding) for languages HTML and especially under the aegis of . A description of this project is available in this document. Here my modest contribution to this first stage of the project which consists of two series of questions to probe the professionals of the web-based on their practices of work as regards working of the code.

How I write my HTML

1. Which version of HTML or XHTML do you use?

   Even if I endeavor to write XHTML 1.0 strict, I use XHTML 1.0 who allows a certain flexibility when one works on documents likely to accommodate all kinds of ornaments like or you in here want some;)

2. Do you comply with strict rules for the writing of the beacons and attributes HTML even in HTML 4.01?

   Yes, I conform to the imposed by the XHTML strict 1.0: writing of the beacons in small letters, attributes between quotation marks, attributes or doubled ( " " or " "), car-closing of the beacons , Br or input, etc

3. Which use do you make validation of the HTML code?

   I take care to validate my Web pages regularly from a point of view of of the code rather than for the validation itself which does not guarantee that the document is readable by an human being.

4. Which use made you of comments HTML?

   Primarily to emphasize the main parties of the page and to indicate the end of the structural blocks. I use also the blank lines to separate certain parties of the code to improve legibility:

   <! -- Beginning of #sidebar-signal
    for the form of log on contains 
   and  for the  -->
   
        " sidebar-signal "  "  " >
   
            " block-1 " >
               
           ! --  -->
   
            " block-2 " >
               
           ! --  -->   
   
       ! -- fine #sidebar-signal  -->
   
   <! -- // end of #sidebar-signal -->
   
   <! -- Beginning of 
    for the advertizing contains
   and  for the inscription with the  -->
   

5. Which are the HTML elements which you use more? Is there a precise logic for the use of such or such element (a P rather than a , for example)?

   In rule general, I try to follow the internal logic of the contents so that the page resembles something even if the style sheets are decontaminated: I misuse the lists ordered or not, the lists of definition, the paragraphs, etc the idea is to give relief to the Web page to emphasize the structure of the ideas.

   However, it sometimes happens to me to use a in the place of a p when the text to be marked out contains only one line and/or that it is insulated semantically speaking. It is the case of the in particular.

   In certain cases, it can sometimes happen to me to add a :

    "  "  is 
   

   Favors it? In certain workings, that makes it possible to give a width clarifies with the beacon , while playing at will on the of the without breaking making up because of a bad interpretation of a model of does not limp always intuitive.

6. Which use do you make generic elements and ?

   Even if that seems to go against my preceding answer, I start by structuring my page in the main lines with the position of the various “blocks” to the spirit. As it is often a question of cutting out a carried out under , he would be hypocritical to make as so only the direction had importance… I thus place my in my HTML document then I defer them in my file .

   The beacons are especially used to me to divide the contents into blocks managed then via the style sheet: creation of columns, implementation of background, etc I try to keep a “semantic” logic with my cuttings, even if most of the time, it is necessary well to acknowledge that certain block are joined together only at ends of presentation or position in the code…

   I use the beacon rather little: it is generally used to me to give a color different to a portion from text or to integrate the .

7. Do you have a Convention of naming for the classes and identifiers?

   I am in full transition on this question. I gently put myself to use the future beacons of the as identifiers or classes to structure my Web pages: , , , , , , H2…, , etc

   For the identifiers or classes made up of two terms or more, I use the dash: #sidebar-signal or #main-content-bottom, for example.

   As you can notice it, I use Anglo-Saxon terms rather, generally more concise and especially without accent: what would give a class.palais-of-congers indeed

8. In which cases rather do use you the classes or rather the identifiers?

   All depends on the document, but I privilege the classes as much as possible. Thus, to reach the small element, I use more readily:

    {…}
    {…}
   

   rather than:

        {…}
        {…}
   

   What makes it possible to have common elements not duplicated for the class . However, according to the projects, the second solution is sometimes preferable. Question of flexibility.

How I write my

1. Which use do you make validation ?

   I use only very seldom the validation for my style sheets: the faults of syntaxes are generally crippling (the desired behavior does not appear) and I generally know when I use a property “owner”…

2. How do you use the comments in ? Do you have precise “styles” for various types of comments (capitals, stars or other symbols in the comment, etc)?

   An example is better than a long discourse:

   /*-----------------------------------------------------------------------
   Name of the style sheet: 
   Date creation: the 11/2/2008
   Description: Main style sheet for project 
   Synopsis:
   @reset
   @utilitaires
   @document
   -----------------------------------------------------------------------*
   
   /*-----------------------------------------------------------------------
                                        @RESET
   -----------------------------------------------------------------------*
   
   @import “/”;
   
   /*-----------------------------------------------------------------------
                                       @UTILITAIRES
   -----------------------------------------------------------------------*
    {
       : , male;
   }
   
   /*-----------------------------------------------------------------------
                                       @DOCUMENT
   -----------------------------------------------------------------------*
    {
       : 0 louse;
   }
   
        {/*  *
           : 75px;
       }
            {
               background: URL (/) No-repeat;
           }
   

3. Do you use the “” selectors (most precise possible and taking again the context of use of the element), or on the contrary shortest possible? Or an intermediate solution?

   When I am not the only one to intervene on the project (most of the time) I am enough “wordy”:

    {…} 
   

   or

        {…} 
   

   Even

        {…}
   

   rather than

        {…}
   

   Note: for questions of performance, it is preferable to use the form #h1-logo {…} who seems the preferred syntax of the navigators.

4. How do you use spaces, returns to the line, blank lines and indentations? Can you provide a typical example?

   Here an example rather representative of my practices on the matter:

    {
       : 950px;
       : 0 car;
       make: 1.2em/1.5 , Arial, without-serif;
   }
   
        {
           : 950px;
           : 95px;
           background: transparency URL  No-repeat ;
       }
   
       #main-content {
           : ; /* zoom: 1; in  *            
       }
            {
               : left;
               : 700px;
               : 20px;
           }
            {
               : left;
               : 230px;
           }
   
        {
           : 950px;
           : ;      
       }
   

   I took the practice to put a space between the colons and the value for reasons of legibility. In addition, I always leave the semicolon to the end of the last statement. Many integrators and developers find more readable to write:

    {: left; : 700px; : 20px;}
    {: left; : 230px;}
   

   Their main argument is that this provision makes it possible to see more selectors and to save lines. I make a point of recalling that many softwares (Dreamweaver, Light, etc) have such a sight. Without counting services as which do it automatically!

5. Do you gather the blocks of statements (selector + their properties) in a logical or foreseeable way? Which is logic used, and in which order you place them?

   I try to follow as well as possible the structure of the HTML document itself. Like it the above example shows, except if I must gather statements to allot common properties to them. In this case, I place them as follows:

   ,
    {
       : 100%;
   }
   
    {
       : 3em;
   }
    {
       : 950px;
   }
    {
       : 1em 3em;
   }
   

6. Do you use multiple indentations (up to several levels of indentation) for, for example, to reflect the structure of the HTML code?

   Yes, to see the example given higher;)

7. Do you use the properties of short cut? If so, do you use them systematically and in priority, or only when that makes it possible to gain some statements (property + value)?

   I use the short cuts as often as possible, in particular for the properties make, background, , , list-style and to border.

8. Do you adhere to a precise command for properties (alphabetical order, “logical” command, etc)? If need be, can you detail it?

   I place initially the properties more impacting on the design like , , , etc and I place then longest at the end: to border, list-style, make, background, etc

   Ca falls well, because these last are often properties more visual than structural, which makes it possible to separate the subgrade within statements !

9. In a relatively long style sheet (more few tens of line, and to hundreds or thousands of lines), how organize you the various styles?

   If the number of page is weak but that style sheet is very long, I use the comments to separate the various parties.

   If the number of page is important, I make a style sheet by page after having joined together the common elements in , that is to say: for , for or 404.css for 404.php, etc

10. You use several style sheets for a project of “small” site (less than ten page-type). Do you use several style sheets for more consequent projects? How you separate the various styles: by type of properties , type of page, etc?

    I tested several methods to become pragmatic: I make as well as possible according to the project, of the time and the number of people likely to intervene on the file. A cutting of the like , , , , etc supposes practices of joint work and similar knowledge in , which is not always the case when one works in team. In fact, cutting by page (cf answer 9) is often better understood thus waste of time and the errors are fewer.

11. Do you use ?

    Yes and not. See low;)

12. Do you use the conditional comments for Internet Explorer? If so, how do you proceed?

    In general, I use a conditional comment to target the versions lower than Internet Explorer 8:

    Then, inside , I use to target IE6 or :

     {to address itself to all the versions lower than }
    * HTML  {to address itself to IE6}        
     {to address itself to }
    

    By supposing of course that behaves in the future according to the standards of the web-based. In the contrary case, according to the cases, it will be necessary either to level the conditional comment ( IE 8) and to find a specific to different at the same time from IE6 and , or to link a specific style sheet for in addition to that planned for the lower versions of Internet Explorer…

In short

I took a real pleasure to lean me on these questions and as I would not like to be the only one to benefit from it, I invite you to take part in this project, than you are professional or enlightened amateurs! The important thing is that you practice regularly languages HTML and to have developed some practices and that you want to share them.