HTML/CSS]ヘッダエリア表記

7530 ワード
テキストリンク

HTMLマークアップ


HEAD領域


1.DTD(Document Type Definition)HTML 5形式として宣言

<!DOCTYPE html>

2.<html>要素のデフォルト言語の設定

<html lang="ko">
</html>
  • langプロパティは、主に、アシストデバイスユーザ、スクリーンリーダーユーザがデフォルト言語の提供方法を決定するのに役立ちます.
  • Webアクセス性の観点から、これは必須のプロパティです.
  • lang="ko"は言語の設定に使用でき、lang="ko-KR"は言語の設定と国/地域の設定に使用できます.
    • ※参考
  • lang="ko"属性もbody領域で使用できます.
    • 一部が英語で書かれている場合はlang=「en」を使用して明確に表すことができます.

    3.文字コード(UTF-8)の簡略化された構文フォーマット(HTML 5)


    HTML 5以前に使用した文字の符号化方法
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    HTML 5が提供する簡略化された符号化
      <meta charset="UTF-8" />
    この2つのフォーマットで表される内容は同じですが、HTML 5のより簡略化された方法を使用することができます.

    4.適切なtitleを設定する

      <title>오늘의 발견 - 쿠팡(Coupang)</title>
    複数のページを作成するときに同じタイトルを指定しない場合は、必要に応じてページに一致するタイトルを挿入し、各ページに独自のタイトルがあるようにします.

    5.お気に入りアイコンの設定

      <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  <link rel="icon" href="./favicon.png">
  • バービコンを設定するには、2つの方法があります.モダンブラウザでは、ショートカットiconではなくアイコンを設定するだけでバビコンを設定できます.
  • ショートカットiconは、古いブラウザがiconをサポートしていない方法です.

    • 6.Google Fontを挿入

  • 2Google Fontに使用するフォントのリンクを貼り付けることができます.
    •   <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap"
    rel="stylesheet" />

    7.normalize cssリンクの挿入

  • Google Searchウィンドウでnormalize css cdnを検索し、既存のcssスタイルを初期化し、リンクをインポートして挿入します.
    • <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    8.使用するcssファイルを接続する

      <link rel="stylesheet" href="./stylesheets/main.css" />
    leetcode[13]Roman to Integer
    1対1のプライマリ・キー・マッピング関係