👨🏾‍🔧 🎯 🌮 「意味論」の上にすべての基本的な点を置いた 👇🏽 👩‍🚀 ✌️

ロボットが言ったように、「そしてジョークがなければ、...、アマチュアが読んで学び、トピックの作成を専門家に任せる方が良い」

後に「プロではない」と呼ばれる多くの記事の過程で、私は将来の作家にすべての点を付けて、あなたの方向に不満がもうないようにします。

Delka（Zenich Igor）は、記事で書かれたコードのセマンティクスを求めて何度も戦いました。これらのコードは、初心者向けの入門書として後で使用できるため、エラーが増加します。

この記事では、すでに述べた多くの人々の考え（！）を結合（コンパイル）しましたが、何らかの理由で大多数に伝えられていません。（www.flack.ru、 www.pepelsbey.netなど）

（コメント付きのすべての便利な追加が含まれます）

元の記事は一時的に

パート1.理論。

セマンティクス -特定の記号、記号のシーケンス、および他の記号を理解する科学。

現在、HTMLレイアウトのセマンティクスについて話しています。したがって、明らかに言語学とのすべての接続を実行するわけではありません。

まず、レイアウトのセマンティクスは、ドキュメントで発生するセマンティクスの関係です。ただし、このような関係が存在するには、プレーンテキストでのHTMLマークアップの実装から生じるドキュメントが必要です。

2つの概念の明らかな違いにもかかわらず、意味論は妥当性なしでは不可能です。有効なサイトを作成できますが、構造的なマークアップがなければ、ポピュリズムになります。

また、コードにマイクロフォーマットを導入しないと、セマンティクスは不可能です。

マイクロフォーマットは、特定のセマンティックデータをHTMLに埋め込む方法です。

しかし、それだけではありません。このようなセマンティクスは3つのセクションに分かれていることを知っておく価値があります。3つすべてを検討する価値があります。

HTML要素の適切な使用
要素の命名;
名前付き要素の組み合わせ。

パートの結論 ：したがって、タンクにいる人は、コードをアップロードする前にすべて同じことを考えましょう。

パート2。練習前。

レイアウトの最初の部分は、正しいDOCTYPEを示すことです。

HTMLおよびXHTML仕様によると、DOCTYPEタグ（「ドキュメントタイプ宣言」を意味する）は、ページで使用している（X）HTMLのバージョンをバリデーターに伝えます。このタグは、各ページの最初の行に常にある必要があります。 DOCTYPEタグは、標準に準拠したWebページの重要なコンポーネントです。これがないと、コードとCSSはバリデーター検証に合格しません。

ジェフリー・ゼルドマンは、マックス・ロスソマキンの翻訳で「 DOCTYPEがなぜそんなに重要なのか」と、すべての詳細を長い間注意深く説明しています。

パート3.「始まり」

有効なセマンティックマークアップだけでなく、クロスブラウザも実現したいので、「リセットスタイル」を使用することをお勧めします。これを行うには、 Eric Meyerの記事を使用してください。

など。これらの要素またはそれらの要素が何に使用されているかを最終的に確認するには（不明な場合）、HTML 4.01仕様を参照する必要があります。

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.

さらに：POSH-プレーンオールドセマンティックHTML-（意図した目的にHTML要素を使用）-「古き良きセマンティックHTML」。

パート4。考えることを学ぶ。

じゃあ例を挙げましょう。最も単純なことは、それが単純な順序なしリストであることです。ほとんどの場合、これはサイトメニューです。「ディーバのレイアウト、要素の命名...」と頭を抱えて、どうやってそれを作り上げることができますか

1<br> 2<br> … <br>

次に、仕様を見て、この問題の意味的に正しい解決策に最適なものを選択してみましょう。

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

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

遠く、難しくなります。 hCardマイクロフォーマットについて思い出してください（覚えていない場合は読みます）。ルートクラスを使用して、名、姓、メールを示します。

<h1 class=”fn n”> ivan@exmail.ru

そこで、本格的な名刺を得ました。さらに、hCardは古き良きvCardのクローンであり、XHTMLの用語では電子名刺形式です。デプロイは非常に簡単です。クラス名vcard（属性値class = "vcard"）で要素（通常はdivまたはspan）を作成（または現在の要素を変更）します。 vCard / hCardフィールドに対応するクラス名を持つ子を作成します。

Sphinx.net.ruサイトでは、 microformatsの紹介の他の側面について詳しく説明しています。

パート5。小さい兄弟を忘れないでください。 IEとその癖。

考えてみると、行動し始めていることを学びましたが、ここに問題があります。IEではすべてが望んでいるわけではありません。さらに考えます。この状況から抜け出すには2つの方法があります。

「スターhtmlハック」。
条件付きコメント;

1つ目は「スターhtmlハック」です。要するに：

#element { position:relative; /* x */ } * HTML #element { position:static; /* IE */ }

詳細は長い間あなたを待っていました。ただし、このようなInternet Explorerブラウザーのハッキングは、他のすべてのブラウザーによってロードされたコードを詰まらせることを忘れないでください。

2番目は条件付きコメントです。または、CSSファイルの通常の接続ですが、IEにのみ表示されます。

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

そこに詳細。

パート6. IDとクラス。

最初に、IDとは何か、クラスとは何かを理解しましょう。 IDは一意の要素の名前であり、クラスは多くの要素の共通名であり、したがって、それらの共通のセマンティックロールです。

したがって、IDを使用して構造的なマークアップを記述する方が便利です。

… … …

名前を付けるときは、1つの要素に対して複数のクラスを覚えておくことが重要です。例：

このことから、次のことが明らかになります。このリンクは、名前（fn）“ Yandex”で組織（org）のサイト（url）につながることです。

したがって、構造マークアップにidを使用して、いくつかの名前空間を作成します。これにより、同じ意味の役割を持つ要素のスタイルの使用に対応し、それに応じてクラス名を指定できます。

セマンティクス自体に加えて、idおよびclass属性を使用したHTML要素の意味的に正しい命名は、ドキュメント自体だけでなく、開発プロセスにも順序をもたらします。

パート7.マイクロフォーマットと名前付き要素の組み合わせの詳細。

Microformats-公式ブログとウィキ
Microformatique -John Allsoppブログ
Microformats -Habrhabrのロシア語のmicroformatsについて

Vadim Makeevが作成したアプリケーション例：

ブログサービスLivejournal.comで使用されるユーザー名とその横にある小さなアイコンのマークアップ。現在の外観は次のとおりです。

<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

有用：

空白の場合、ユーザー名は移植できません：nowrap
おたまじゃくしは垂直に配置され、フレームが無効になり、インデントされ、サイズが設定されました-幅= '17 '高さ=' 17 'スタイル=' ... '
Kuteevは、大胆なことがkuteev

しかし、hCardマイクロフォーマットでできること：

<a href="#" target="_blank" class="ico" title=""> <a href="#" target="_blank" class="fn nickname url" title=""> kuteev

今、私たちは何を学ぶことができます：

class = "vcard"であるため、Kuteevのミニカードを扱っています。
オタマジャクシからのリンクはプロファイルにつながります-title = "Profile"を指定しました
ニックネームKuteev-kuteev、class = "fn nickname"が表示されます
ニックネームからのリンクは、KuteyevのWebサイト-class =“ nickname url”、またはむしろジャーナルにつながります-title =“ Journal”を指定しました

したがって、上記の例のすべての情報は、マークアップがhCardマイクロフォーマットの仕様で形式化されているため、ブラウザの検索エンジンとプラグインで利用可能になります。

パート9。

元の記事を読み、それらを記憶し、愚かなことはもうしません。

「意味論」の上にすべての基本的な点を置いた