はじめに
高校大学と文系で生きてきた人間が、知識をゼロからイチにするために学んだことをアウトプットします。
まずはHTMLの基本中の基本を。
基本構文
つまり文書として成立するために必要なもの
kihon1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML基本</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>
-
<!DOCTYPE html>：「この文書はHTML5のルールに従って書かれています」という宣言。あるのがベターだがほぼ慣例。大文字小文字の区別はなし。 -
<html></html>：HTML文書であることを示す。lang="ja"は日本語を使用するの意味。 -
<head></head>：ページ上に表示させない、文書そのものの情報。 -
<meta>：メタデータを指定。charset="UTF-8"は「文字エンコーディングをUTF-8に指定する」の意味。ほかに指定するメタデータとしては検索エンジン向けのキーワード、リダイレクトなどがある。 -
<title></title>：タイトル。文字エンコーディングとタイトルは最低限指定しておく。 -
<link>：リンクする外部リソースを指定。href属性（リンクする外部リソースのUPL）とrel属性（現在のファイルとリンク先の外部ファイルとの関係性を表すキーワード）が必須。type属性はリンクする外部リソースのMIMEタイプ1。 -
<body></body>：ページに表示する内容をこの中に記述していく。
テキスト
見出し<h1>～<h6>
kihon2.html
<h1>見出し１</h1>
<h2>見出し２</h2>
<h3>見出し３</h3>
<h4>見出し４</h4>
<h5>見出し５</h5>
<h6>見出し６</h6>
結果
見出し１
見出し２
見出し３
見出し４
見出し５
見出し６
見出しタグを使うと一般的なブラウザでは
- テキストのサイズが数字に応じて変化する
- 太字で表示される
- 前後に改行が入る
といった変化が自動的に発生する。
ただし「見出し」は「見出し」であるため、単純にサイズを変えたい（つまり見栄えの観点で変化をつけたい）ときはCSSで指定するのがベター。
太字<b>
kihon3.html
普通サイズ、<b>太字になる</b>
結果
普通サイズ、太字になる
改行<br>
kihon3.html
コード上は続いていても改行タグが入ると<br>改行される
コード上は改行しても改行タグがないと
文字は続いてしまう
結果
コード上は続いていても改行タグが入ると
改行される
コード上は改行しても改行タグがないと文字は続いてしまう
細かいものはもっともっとあるけどここで調べればなんとかなる。
HTML5リファレンス
-
「タイプ名/サブタイプ名」の形式の文字列で、WEBサーバーとWEBブラウザの間でデータの形式を指定するために使われるもの。
拡張子ごとに決められたMIMEタイプが存在する。.cssならtext/css、.gifならimage/gifなど。 ↩