HTML - 2


✔HTMLドキュメントは常に<!DOCTYPE html>で始まる必要があります。

<!DOCTYPE html>  
📕 따로 닫아줄 필요 없음

✔ <html></html>


<!DOCTYPE html>と入力してhtmlラベルを開きます.
<!DOCTYPE html>
<html></html> 👈

✔ <html lang="ko"></html>


lang(language)
Google、NAVER、Bingなどの検索エンジンを支援するために入力します.
サイトで使われている主な言語を教えてください.
<!DOCTYPE html>
<html lang="ko"></html> 👈

サイトはheadとbodyで構成されています。


✔ <body></body>


•ブラウザ画面に表示される内容はすべてbodyラベルに表示されている必要があります.
<!DOCTYPE html>
<html>
  <body> 👈
    <h1>Hello!</h1>
    <a href="http://www.google.co.kr" target="_blank">Go to google.com</a>
    <img src="img/banana.jpg" />
  </body> 👈
</html>

✔ <head></head>


•ページ環境を設定します.
•Webサイトの情報をブラウザにできるだけ明確に伝える.
•headタグに属するタグが見えません.
•ブラウザ画面に表示される内容はすべてbodyラベルに表示されている必要があります.
<!DOCTYPE html>
<html>
  <head></head> 👈
  <body>
    <h1>Hello!</h1>
    <a href="http://www.google.co.kr" target="_blank">Go to google.com</a>
    <img src="img/banana.jpg" />
  </body>
</html>

✔ <title></title>


•tabに表示されるテキスト
•検索時に表示される大きな見出し
•headラベルに入力します.
<!DOCTYPE html>
<html>
  <head>
    <title>Home - My first website.</title> 👈
  </head>
  <body>
    <h1>Hello!</h1>
    <a href="http://www.google.co.kr" target="_blank">Go to google.com</a>
    <img src="img/banana.jpg" />
  </body>
</html>
Netflixの例
<title>Netflix&nbsp;대한민국 - 인터넷으로 TV 프로그램과 영화를 시청하세요</title>

✔ <meta>


•追加情報を表示します.
• self-closing tag
•headラベルに入力します.
•contentとnameというプロパティがあります.
<meta content="" name="">
<meta content="" name="keywords">
<meta content="" name="description">
Netflixの例
<meta content="스마트 TV, 태블릿, 스마트폰, PC, 게임 콘솔 등 
다양한 디바이스에서 영화와 TV 프로그램을 마음껏 즐기세요." name="description">
<meta charset="utf-8">
ページの文字コードを宣言します.
ハングルまたはその他の特殊文字を含む言語を入力する場合
ブラウザではこれらの文字が理解できない場合がありますので、必ず記入してください
📕 リファレンス
👉 <meta> : The Document-level Metadata element
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
👉 Standard metadata names
https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta/name

✔ <link>


•バビコン<link>ラベルでrel=「クイックicon」プロパティを持つ
<link rel="shortcut icon" sizes="16x16 32x32 64x64" href="/m.png">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?1"/>
Netflixの例
<link rel="shortcut icon" href="https://assets.nflxext.com/us/ffe/siteui/common/icons/nficon2016.ico">