ベースとなるタグ

html

html全体の定義。このコードがhtmlで書かれているということを記述している。
コード全体の最初と最後に記述。

<html> … </html>

header

使用するスタイルシートやスクリプトを定義するヘッダ要素の定義。ブラウザ上には表示されない。
このタグの中に、title、meta、script、link、styleなどのタグが定義される。

<head> … </head>

body

このボディ要素の中に、ブラウザ上に表示する内容を記述する。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>テスト</title>
    </head>
    <body>
        <!-- ここに記述された内容がブラウザ上で表示される -->
    </body>
</html>

テキスト表示

パラグラフ（段落）

文章の段落を作るためのタグ。強制的に改行したい場合は、<br>タグを用いる。

<p> … </p>

見出し

見出しを作る。見出しのレベルに応じて、h1からh6までがある。h1がもっとも大きいレベルの見出し。ブラウザによって見出しのサイズの設定が変わる。

<h1> … </h1>
<h2> … </h2>
<h3> … </h3>
<h4> … </h4>
<h5> … </h5>
<h6> … </h6>

ブロック

全体のレイアウトの中での一つのブロックを定義する。

<div> … </div>

画像

HTMLでは<img>タグによって画像を配置する。
<img src=”test1.jpg” width=”320″ height=”240″ alt=”test1″>
画像の大きさ（width, height）を指定していると、画像をすべて読み込み終わる前にレイアウト処理が完了し、ページの表示全体が早くなる。もちろんこの値は配置する画像によって異なる。また、alt属性は画像が表示されなかったときに表示されるテキストで、テキストしか表示できないブラウザや音声読み上げブラウザのために入れておく。

<img>
<img src="test1.jpg" width="320" height="240" alt="test1">

リンク

リンク。○にはリンク先のURLが入る。

<a href="○"> … </a>

画像をリンクに使う
<a>タグで<img>タグを囲めば、画像がリンクになる。

<a href="sample1.html"><img src="img/button1.gif" width="320" height="240" alt="button1"></a>

基本的なタグ