CODE

【HTML基礎】HTMLの基本的なタグの使い方

HTMLの基本的なタグの使い方

 

プログラミング初心者で、これからHTMLのタグを覚え始めようとしている。

HTMLの基本的なタグの使い方を知りたい。

 

こういった方向けの記事です。

 

本記事のテーマ

HTMLの基本的なタグの使い方を覚えよう

作業すること

  • テキストエディタにHTMLのコードを書いてみる
  • HTMLのコードをブラウザで開いてみる

 

読者さんへのメッセージ

本記事は全くプログラミング経験がない方で、これからWeb制作を始める、もしくはWeb制作を通してプログラミングの勉強を始めようとしている方に向けた記事です。

また、現役の理系大学生や文系出身でエンジニア、Webデザイナー、Webディレクターに就職予定の方にもお読みいただける内容です。

 

今回は、HTMLでよく使う基本的なタグの使い方を説明していきます。

ほとんどパソコンを触ったことがない方でもわかるように解説していきます。

では、さっそく見ていきましょう。

 

注意

本記事で出てくるタグは全て<body>~</body>の中に書くものです

 

①見出しをつける【<h1>~<h6>タグ】

新聞の見出し

 

<h1>~<h6>タグ

見出しを作成するときは<h1>~<h6>タグを使います。

 

<h1>、<h2>、<h3>…<h6>まであり<h1>が一番大きな見出しで、数字が大きくなるほど小さい見出しになっていきます。

例えば、<h1>タグはWebページのタイトルなどに使われます。このページだと「【HTML基礎】HTMLの基本的なタグの使い方」は<h1>タグで記載されてます。

 

すぐ上にある「見出しをつける【<h1>~<h6>タグ】」は<h2>タグ、「<h1>~<h6>タグ」は<h3>タグで記載しています。

 

サンプルコード1

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>見出しをつける</title>
</head>
<body>
<h1>h1は1番大きい見出し</h1>
<h2>h2は2番目に大きい見出し</h2>
<h3>h3は3番目に大きい見出し</h3>
<h4>h4は4番目に大きい見出し</h4>
<h5>h5は5番目に大きい見出し</h5>
<h6>h6は1番小さい見出し</h6>
</body>
</html>

ブラウザ表示で表示させると、、、

サンプルコード1のブラウザ表示

見出しが6個表示されました。

 

見出しタグを使う順番

見出しタグをブラウザに表示してみて分かるように、<h1>~<h6>になるに従って、見出しの文字が小さくなっています。

ですが、小さい文字で見出しを表示したいから<h6>タグを使う、大きい文字で表示したいから<h1>タグを使うなどといったように、見た目を理由に<h1>~<h6>タグを選んではいけません。

文字の大きさや見た目は、後からCSSというプログラミング言語を使って変えられれます。

見出しタグを選ぶときは、ページ内の見出しの順序を守ってコーディングしましょう。

また、大見出しの<h1>タグは基本的に1ページにつき一度の使用がいいとされています。

 

②文章を表示する【<p>タグ】

文章を書いてる画像

 

<p>タグ

文章を表示するときは<p>タグを使います。

<p>タグは文章の段落を表し、文章のまとまりを表示します。

<p>タグを使うと囲まれた文章が段落になり、ブラウザ表示でも段落ごとに改行され、段落間にはスペースができます。

 

サンプルコード2

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>文章を表示する</title>
</head>
<body>
<h1>Web制作の基礎</h1>
<p>HTMLとCSSを勉強すると簡単なWebサイトが作れるようになります。</p>
<p>JavaScriptを勉強するとサイトに動きをつけることができます。</p>
</body>
</html>

ブラウザ表示で表示させると、、、

サンプルコード2のブラウザ表示

見出しの下に文章が2行表示されましたね。

 

③画像を挿入する【<img>タグ】

夜景とグラスの画像

 

<img>タグ

画像を挿入するときは<img>タグを使います。

他のタグと少し書き方が特殊なので注意しましょう。

 

<img>タグは終了タグがない

<img>タグでは通常のタグのように終了タグがなく、文字列を囲まず単独で使うのが特徴です。

 

src 属性

HTMLコード内に<img>と書くだけでは画像は表示されません。表示させる画像をsrc 属性で指定する必要があり、このsrc属性に書かれた画像が表示されます。

 

alt 属性

alt 属性には、画像の代替テキストを入力します。主に、画像が表示されなかったときに代わりに表示される文のことです。

alt 属性は必須のため、記述を省略することはできませんが、代替テキストが表示されなくても本文の内容に影響がない場合は「alt=""」のように空にしておくことも可能です。

 

サンプルコード3

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像を表示する</title>
</head>
<body>
<img src="yakei.jpg" alt="夜景の画像">
</body>
</html>

ブラウザ表示で表示させると、、、

サンプルコード3のブラウザ表示

画像が表示されましたね!

 

注意

HTMLファイルが保存されているフォルダと同じフォルダに表示したい画像を保存した場合、src 属性は上記の指定の仕方で問題ありませんが、HTMLファイルと違うフォルダに画像を保存してある場合、ファイルパスの指定を理解しておく必要があります。
詳しくは別の記事で解説予定です。

 

④リンクをはる【<a>タグ】

リンクの作成

 

<a>タグ

リンクをはるときは<a>タグを使います。

リンク先はhref属性で指定し、リンクさせたい部分を<a href="">と</a> で囲みます。

試しにこのHARUHIblogのトップページへのリンクをはってみましょう。

 

サンプルコード4

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リンクをはる</title>
</head>
<body>
<h1>HTMLについて</h1>
<p>これからHTMLの学習を始めましょう!</p>
<a href="https://haruhinet.com/">HARUHIblogへ!</a>
</body>
</html>

ブラウザ表示で表示させると、、、

サンプルコード4のブラウザ表示

リンクが表示されました。試しにリンクをクリックして、リンク先のURLにアクセスしてみましょう!

このサイトのトップページに飛んだら成功です!

 

⑤リストを表示する【<ul>タグ+<li>タグ、<ol>タグ+<li>タグ】

リストの作成

 

<ul>タグ+<li>タグ

箇条書きリストを表示するときは<ul>タグを使います。

ただし、リストの表示は<ul>タグだけでは表示されず、<ul>タグの中に<li>タグを使ってリストの項目を追加します。

 

サンプルコード5

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>箇条書きリスト</title>
</head>
<body>
<h1>箇条書きリストの表示のしかた</h1>
<ul>
<li>1つめの項目</li>
<li>2つめの項目</li>
<li>3つめの項目</li>
</ul>
</body>
</html>

ブラウザで表示すると、、、

サンプルコード5のブラウザ表示

箇条書きのリストが表示されました。

 

<ol>タグ+<li>タグ

番号付きリストを表示させるときは<ol>タグを使います。

書き方は<ul>タグと同様に、<ol>タグの中に<li>タグを使ってリストの項目を追加します。

 

サンプルコード6

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>番号付きリスト</title>
</head>
<body>
<h1>番号付きリストの表示のしかた</h1>
<ol>
<li>開発環境を構築します</li>
<li>HTMLを学習します</li>
<li>CSSを勉強します</li>
</ol>
</body>
</html>

ブラウザで表示すると、、、

サンプルコード6のブラウザ表示

番号付きのリストが表示されました。

 

⑥表の作成【<table>タグ+<tr>タグ+<th>タグ+<td>タグ】

表の作成

 

<table>タグ+<tr>タグ+<th>タグ+<td>タグ

表は複数のタグを合わせて作成します。

似たようなタグが多く、紛らわしいですが、使いながら少しづつ覚えていきましょう。

 

各タグの解説

<table>タグ・・・表を示し、表全体を囲む。<table>~</table>の範囲が表になる

<tr>タグ・・・表の1行を囲む

<th>タグ・・・<tr>タグの中で使い、表の見出しとなるセルを作成する

<td>タグ・・・<tr>タグの中で使い、表のデータとなるセルを作成する

 

サンプルコード7

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>表の作成</title>
</head>
<body>
<table border="1">
<tr>
<th>はるひ</th>
<td>プロジェクトマネージャー</td>
</tr>
<tr>
<th>けい</th>
<td>YouTube・デザイン素材作成担当</td>
</tr>
<tr>
<th>えみ</th>
<td>HTMLコーディング担当</td>
</tr>
<tr>
<th>ちこ</th>
<td>CSSコーディング担当</td>
</tr>
</table>
</body>
</html>

ブラウザで表示してみると、、、

サンプルコード7のブラウザ表示

表が作成されました!ちょっと解説しますね。

 

まず、<table>タグ内の border="1" についてはCSSに関する記事で詳しく説明しますが、ここでは表の罫線を示しています。これがないと表の枠に当たる部分がなくなります。

また、見出しセル<th>とデータセル<td>は同じ<tr>の中に入れます。

<th>タグを除いて書くことも可能です。その場合、見出しがなくなります。

 

手を動かしながら覚えよう!

ここまで、Web制作において、よく使うタグの基本的な使い方を紹介してきました。

これ以外にもたくさんタグはありますし、様々な形で応用的な使い方がありますが、まずは今回紹介したタグを、実際に手を動かしブラウザに表示しながら学習を進めましょう!

応用的な使い方は、実際にWebサイトを作りながら、調べながら学習するのがおすすめです。

ですから、今はいまいち理解できてなくても、とりあえず学習を進めましょう!笑

プログラミング学習で大切なのは、まずは一通り学ぶことです。

 

次はWebページの章・節・項などの分類分けを意識したコーディングを学習しましょう。

 

 

 

 

 

-CODE

Copyright© HARUHIblog , 2021 All Rights Reserved Powered by AFFINGER5.