HTMLラベル、構造設計

17013 ワード
テキストリンク
HTMLタグリファレンス
https://www.w3schools.com/tags/ref_byfunc.asp
  • jsbin.com
    • タグを書き込むときは、実行中にエラーが発生したタグだけを使用しないでください.
    視覚障害者などはスクリプトリーダーですか?Webにアクセスするために使用される場合がありますが、使用されているラベルが正しくないと、正常に読み取れません.
    <div class="header">
<div class="footer">
<header>
<footer>
    <header>, <footer>もできますが、ブラウザごとにサポートされているため、これはお勧めできません.
    (これはエラーではありませんが、html 5から追加されたタグで、通常はデスクトップバージョンに書き込めません.)
    これらのブラウザは、最新のブラウザが多数あるモバイル環境で使用できます.
    (ex. https://m.naver.com )
    こう書くと
    <li> </li>
<li> </li>
<li> </li>
<li> </li>
    かもしれない
    html tag
    html header tag
    このように検索すると、w 3 schoolsのウェブサイトでこれらのラベルを見ることができます.
    html structure design
      <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <header>
  <h1>Company Name</h1>
  <img src="..." alt="logo">
  </header>
  
  <div>  <!-- section태그를 사용했었지만, 별 의미없는 container에는 section태그가 적절하지 않아서 수정합니다 -->
    <nav><ul>
      <li>Home</li>
      <li>Home</li>
      <li>About</li>
      <li>Map</li>
      </ul></nav>
    
    <div>  
      <button></button>
      <div><img src="dd" alt=""></div>
      <div><img src="dd" alt=""></div>
      <div><img src="dd" alt=""></div>
      <button></button>
    </div>
    <div>
      <ul>
        <li>
          <h3>What we do</h3>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing</div>
        </li>
        <li>
          <h3>What we do</h3>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique accusamus, corporis, dolorum fugiat tenetur porro. Aspernatur commodi, ea suscipit non? Molestiae nulla explicabo debitis provident nostrum dolorem minima reiciendis suscipit?</div>
        </li>
        <li>
          <h3>What we do</h3>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing</div>
        </li>
      </ul>
    </div>
  </div>
  <footer>
    <span>Copyright @codesquad</span>
  </footer>
</body>
</html>
    10990号:星図-15
    JavaScript - 30