HTML学習

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>