Clever Geek Handbook

7つの良いHTML習慣

どのテクノロジーでも優れた方法を見つけるのは簡単ですが、残念ながらHTMLでそれを行うのはそれほど簡単ではありません。よく考えずに、7つのヒントのリストを作成し、Habrと共有しました。





maximum-scale = 1およびuser-scalable = noを使用しないでください

インターフェイスを操作するとき、テキストを読むためにページをズームしたり、小さすぎるボタンをクリックしたりする必要があります。しかし、開発者が私にこれを禁止することがあります。それらは、maximum-scale = 1とuser-scalable = noを追加するだけです。そして、私は苦しんで、いまいましいボタンを押す方法を考え出します。





ユーザーを満足させたい場合は、ネイティブブラウザのズームを無効にしないでください。





こんなことしないで





<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1">

あなたはこれを行うことができます





<meta name="viewport" content="width=device-width, initial-scale=1">

スパンの代わりにhref属性のないリンクを使用する

リンクを非アクティブにする必要がある場合があります。一般的な解決策は、リンクをスパンテキスト要素に置き換えることです。その結果、非インタラクティブなテキストが得られます。





しかし、もっと簡潔な解決策があります。href属性はオプションであるため、要素に追加しないと、非アクティブなブールリンクになります。また、再度アクティブにしたい場合は、href属性を返すだけです。





たとえば、このアプローチを使用して、ナビゲーションマークアップで現在のページを示すことができます。





こんなことしないで





<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><span>About me</span></li>
    <li><a href="#">Projects</a></li>
  </ul>
</nav>

あなたはこれを行うことができます





<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a>About me</a></li>
    <li><a href="#">Projects</a></li>
  </ul>
</nav>

href = "＃"の代わりにボタンを使用する

開発者がリンクのように見えるインタラクティブな要素をマークアップする必要がある場合、開発者はその要素を使用します。





, href="#". JS, . , role="button", , .





button type="button" , .









<a href="#">Show my order</a>
<!--  -->
<a href="#" role="button">Show my order</a>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    





<button type="button">Show my order</button>

inputmode

. , , .





, inputmode. , email, . tel, .









<input type="text" placeholder="Your email">
<input type="text" placeholder="Your tel">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    





<input inputmode="email" placeholder="Your email">
<input inputmode="tel" placeholder="Your tel">

width height SVG

SVG HTML, , width height. , , .





, CSS, , CSS , . , . , width height .









<svg xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 448 512">
  <path fill="currentColor" d="..."></path>
</svg>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    
svg {
  width: 0.875rem;
  height: 1rem;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    





<svg xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 448 512"
    width="0.875rem"
    height="1rem">
  <path fill="currentColor" d="..."></path>
</svg>

h1-h6 , , , , , .





, , , , .





, "iPhone 11 Just the right amount of everything." h2 h3, . : "iPhone 11, . Just the right amount of everything., ".





: "iPhone 11 Just the right amount of everything, ". 









<h2>iPhone 11</h2>
<h3>Just the right amount of everything.</h3>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    





<h2>
  <span>iPhone 11</span>
  <span>Just the right amount of everything.</span>
</h2>

altに意味を追加する

alt属性は、スクリーンリーダーのユーザーが画像に表示されている内容を理解できるため、非常に便利です。残念ながら、多くの開発者はそれを誤って使用しています。画像の周りにテキストを複製するか、まったく追加しません。





最善の解決策は、周囲のテキストを補足する短い説明を追加することです。たとえば、画像とタイトルが付いた商品カードがある場合は、代わりに商品の外観を説明します。





こんなことしないで





<header>
  <img src="picture.jpg" alt="adidas Originals Superstar">
  <h3>adidas Originals Superstar</h3>
</header>

あなたはこれを行うことができます





<header>
  <img src="picture.jpg" alt="  adidas Originals Superstar  ">
  <h3>adidas Originals Superstar</h3>
</header>

PS CSS / HTMLについて質問がある場合は、遠慮なく私のメールに書いてください。Habréの私のプロフィールに記載されています。







More articles:


All Articles