HTML学習
本稿では、HTMLの基本についておさらいしましょう。
目次
文章の構造
基本構造
HTMLをツールを使わずに書く場合、拡張子がhtmlのファイルを作成し、次のように記述します。DOCTYPEではこの文章がHTML5文章であることを指定しています。なお、インデントはなくても構いません。
<!DOCTYPE html>
<html>
<head>
<!-- これはコメント文 -->
<!-- ここにドキュメントのヘッダーを書く -->
</head>
<body>
<!-- ここにコンテンツの本体(表示部分)を書く -->
</body>
</html>
ヘッダーやフッターなどの拡張をした基本構造
HTML5ではページヘッダー用やページフッター用のタグが用意されています。ページ内にページヘッダーやページフッターがある場合は使うとコードの視認性が高くなります。
<!DOCTYPE html>
<html>
<head>
<!-- ここにドキュメントのヘッダーを書く -->
</head>
<body>
<header>
<!-- ここにコンテンツのヘッダーを書く -->
</header>
<main>
<!-- ここにコンテンツのメインを書く -->
</main>
<footer>
<!-- ここにコンテンツのフッターを書く -->
</footer>
</body>
</html>
最小セット
日本語サイトであれば文字コードの指定をしましょう。基本的には文字コードは UTF-8 でよいと思います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<!-- ここにドキュメントのヘッダーを書く -->
</head>
<body>
</body>
</html>
外部ファイルの読み込み
JavaScriptやスタイルシート(CSS)のライブラリの読み込みは次のように指定します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="path/to/javascript.js"></script>
<link rel="stylesheet" href="path/to/stylesheet.css">
<!-- ここにドキュメントのヘッダーを書く -->
</head>
<body>
</body>
</html>
タイトル
h1, h2, h3,, ... 形式のタグはタイトルです。段落はpタグで記述します。
<body>
<h1>大タイトル</h1>
<p>段落1</p>
<h2>中タイトル</h2>
<p>段落2</p>
<h3>小タイトル1</h3>
<p>段落3</p>
<p>段落4</p>
<h3>小タイトル2</h3>
<p>段落5</p>
</body>
ブロック
文書をブロックとして管理します。入れ子構造となっていることが普通です。ブロックにclassを指定することで様々な機能を実現するライブラリが多いです。また、ブロックにライブラリを適用するために id キーワードでブロックを特定できるようにする場合が多いです。
<div class="classA" id="block_id">
<div class="classB" >
</div>
<div class="classC">
</div>
</div>
スクリプト
scriptタグで囲まれた内容はJavascriptと呼ばれるプロラグミング言語です。安易に変更すると動かなくなるため注意してください。
<script>
let aaa = 1;
let bbb = 2;
...
</script>
onclickなどonで始まる名前の属性名もプログラミングコードとなっています。
<a href="javascript:void(0)" onclick="func()">...</a>
それ以外では{{ ... }} などの形式でプログラムを記述するフレームワークもございます。
styleタグで囲まれた内容はstyle sheetと呼ばれる表示方法を指定するスクリプトです。
<style>
h1 {
color: red;
...
}
</style>