【勉強嫌いでもわかる】HTMLタグの基本を学ぶ!初心者の忘備録 | nekochan's

【勉強嫌いでもわかる】HTMLタグの基本を学ぶ!初心者の忘備録

WEBデザイン

求職者支援訓練でwebデザインを学ぶデザイン初心者が、HTMLタグの基本知識を忘備録としてまとめました。HTML自体はそんなに複雑ではないので、このブログを見るだけで一通り理解できるはずです。デザイン初心者やブロガーさんは参考にしてください。

タグ一覧表はこちら

HTMLタグ意味備考
見出しh1〜h6見出しは、h1~h6タグを利用します。h1〜h6のhはheadingの略で、書籍の章立ての「章」に相当します。
段落pパラグラフ(段落)では、pタグを利用します。ブログの本文や商品説明で使われます。pはParagraphの略です。
改行brテキスト内で改行する場合は、brタグを利用します。brとはBreak(改行)の略です。
画像img画像を表示するには、imgタグを利用します。imgはImageの略です。
リンクaリンクを作成する場合は、aタグを利用します。aはアンカー(Anchor)の略です。
順番なしリストulリスト表示する場合は、ulタグとliタグを利用します。ulはUnoder list(順序のないリスト)の略です。
liliはList Itemの略で各項目をliで挟みます。ulの中にliが入ります。
順番ありリストol順序のある箇条書きのようにリスト表示する場合は、olタグとliタグを利用します。olはOder list(順序のあるリスト)の略です。
liliはList Itemの略で各項目をliで挟みます。olの中にliが入ります。
定義リストdl定義リスト(定義する用語とその用語の説明を一対にしたリスト)を作る場合はdlを利用します。dlはDefinition Listの略です。※あまり使用する機会はありません。
dt用語はdtを利用します。dtはDefinition Termの略です。dtはdlの中に入ります。
dd用語の説明はddを利用します。ddはDefinition Descriptionの略です。ddはdlの中に入ります。
テーブル(表)tableテーブル・表を定義します
trtable rowの略です。テーブルの行を定義します。
thtable headerの略です。テーブルの見出し項目を定義します。
tdtable dataの略です。テーブルのデータ項目を定義します。
汎用タグdivdiv特定の意味を持ちませんが、複数のタグをグループ化して、CSSで指示を出す際などにdivタグを利用します。
汎用タグspanspandivタグと同じように、span自体は特に意味を持っていませんが、指定した範囲をグループとする際に、spanタグを利用します。
divタグが改行が入るのに対して、spanは改行が入らないため、pタグ内で文字色やサイズを変更したいときなどによく使います。
水平線hr水平線を引いて文書を区切る場合はhrタグを利用します。hrはHorizontal Ruleの略です。終了タグはありません。
引用blockquoteblockquoteは文章を引用・転載する際に使用します。blockquoteで囲まれた部分が引用・転載部分になります。引用する際は引用元を掲載するようにしましょう。
整形済みテキストprepreタグを利用して整形済みテキストとして記述できます。preはPreformatted Text(整形済みテキスト) の略です。
フォームformお問い合わせフォームなどのフォームはformタグを利用します。
inputformタグの中に入れる入力項目にinputタグがあります。テキスト項目、ラジオボタン、チェックボックス、パスワードなど入力項目を指定することができます。
selectformタグの中に入れる入力項目にselectタグがあります。セレクトメニューを指定することができます。
textarea長文のメッセージを入力項目にしたい場合は、textareaタグを利用します
ヘッダーheader文書中でヘッダーに相当する部分にheaderタグを利用できます。機能的な意味はありません。
※文書のヘッダ情報を表すheadタグとは意味が全く異なります。
フッターfooter文書中でフッターに相当する部分にfooterタグを利用できます。機能的な意味はありません。
ナビゲーションnav文書中でナビゲーションに相当する部分にnavタグ利用できます。機能的な意味はありません。
セクションsection文書中でセクション(かたまり)に相当する部分にsectionタグを利用できます。機能的な意味はありません。
動画videomp4などの動画を再生する場合にはvideoタグを利用します。

HTMLとは

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>HTMLタグの基本を学ぶ</title>
</head>
<body>
<h1>HTML</h1>
<p>Hyper Text Markup Language の略でウェブページを作成するための言語。</p>
</body>
</html>

HTML(えいちてぃーえむえる)とは、ウェブページを作るためのマークアップ言語です。

ウェブページに表示したい文字や画像をHTMLタグを用いて記述していくことで、土台を作ります。しかし、HTMLだけでは白地に黒い文字、画像が並んだだけの単調なものしか作れません。
例えるとしたら、ワード上に文字を打っただけのようなものでしょうか。

HTMLで記述したものに、CSSと言われるマークアップ言語で文字の大きさや色、配置などの指示を出すことで、一般的によくみられるウェブサイトを作ることができます。

他にも、JavaScriptや jQueryなどで動きのある要素を追加することもできますが、複雑になってしまうので、ここでは説明を省きます。

HTMLタグ

見出し(Hタグ)

<h1>これは見出し1です</h1>
<h2>これは見出し2です</h2>
<h3>これは見出し3です</h3>
<h4>これは見出し4です</h4>
<h5>これは見出し5です</h5>
<h6>これは見出し6です</h6>

hタグの「h」は「Heading」という意味があり、文章の設題となる見出しを表します。

見出しにしたいテキスト・画像を、「h」+「数字(1~6)」の開始タグ・終了タグで挟みます。※h7以降はありません。

h1が一番の大見出しとなり、h2,h3,h4…などは小見出しになります。

h1はページのタイトルに、h2は章のタイトル、h3は節のタイトル、h4は項のタイトルといったように、正しい文章構成で見出しを設定するようにしましょう。
この順番が正しく使われなくても、コードは表示されますが、順序がめちゃめちゃだったりすると、検索エンジンでの結果に影響が出てしまいます。
SEO対策をする方は、念頭に置いておいてください。

<h1><img src=”img/title.jpg” alt=”見出し1のタイトル”></h1>

また、hタグに画像を使うことも可能です。

その場合はalt属性の部分に画像の内容を表すテキストを入れることで、検索エンジンに内容を伝えることができ、SEO効果が期待できます。

段落(pタグ)

「p」は「Paragraph(パラグラフ)」の略で、テキストや画像を<p></p>で挟み、ひとつの段落を表します。

段落内で文章を改行したいときは<br>タグを使います。

HTMLの構造上、pタグの使用を推奨しています。段落内で空白を作りたいがために、意味を持たない改行を使いたくなることもありますよね?しかしながら、 HTMLでbrタグが非推奨とされています。

そのため、SEOを意識したページを作るなら、brタグは多用しないように気をつけておいた方が良いでしょう。

また、brタグを多用すると、スマホ表示で見た時にズレが生じたり、必要以上に空白ができてしまったりするので、使用する際は必ずスマホ表示で違和感がないかも、併せて確認する必要があります。

リンク(アンカータグ)

<a href=”https://www.nekochans.site/”>リンクテキスト</a>

「a」は「Anchor(アンカー)」の略で、テキストや画像を<a href=""></a>で挟み、リンクとして表示させることができます。

href(エイチレフ)属性には、リンク先の値(URLやファイル名)を入れます。

href属性の値は絶対パスまたは相対パスで記述します。

  • 絶対パス:URL(例:https://~)
  • 相対パス:リンク先のファイルの位置を表したもの。リンク先のファイルがひとつ上の階層にある場合は「../」、さらにその上は「../../」で表す。

画像(IMGタグ)

<img src=”sample.jpg”>

「img」は「Image」の略で、画像はimgタグを使って表示します。
※imgタグには、他のタグにあるような終了タグ「</img>」はありません。

「src」は「Source(ソース)」の略で、src(エス・アール・シー)という属性に、画像ファイル(GIF、JPEG、PNG、PDFなどのファイルのURLやパス)の場所を示す値を入れます。

src属性の値も、リンクと同様に絶対パスまたは相対パスで記述します。

リスト(LIタグ)

<h3>WEBデザインに必要なスキル</h3>
<ul>
<li>Photoshop</li>
<li>iillustrator</li>
<li>HTML/CSS</li>
</ul>

<h3>だし巻き卵の作り方</h3>
<ol>
<li>だしと卵を混ぜる</li>
<li>熱したフライパンに流し込む</li>
<li>クルクルと巻き込む</li>
</ol>

「li」は「List item」の略。
「ul」は「Unordered List」の略。
「ol」は「Ordered List」の略。

箇条書きにするテキストや画像を<li></li>で囲み、それらを<ul>~</ul>または<ol>~</ol>の間に挟みます。

ulは順番を付けないリストは、先頭にナカグロのマーカーが付きます。

  • Photoshop
  • illustrator
  • HTML/CSS

olは順番を付けるリストは、先頭に自動で数字(1、2、3…)が振られます。

  1. だしと卵を混ぜる
  2. 熱したフライパンに流し込む
  3. クルクルと巻き込む

リストタグを使う際に、ナカグロや数字を表示したく無い場合は、CSSで非表示にすることもできます。

表(TABLEタグ)

<table>
<tr>
<th>職種</th>
<th>点数</th>
</tr>
<tr>
<td>国語</td>
<td>70</td>
</tr>
</table>

「table」は「Table(表)」。
「tr」は「Table Row」、「th」は「Table Header」、「td」は「Table Data」の略。

科目点数
国語70

表全体は、table要素で表全体を<table></table>で挟み、表の行である「tr要素」で1行ごとに<tr></tr>で挟みます。

見出しセルがth要素、データセルがtd要素で、どちらもテキストや画像を<td></td>で挟みます。

コメントアウト

<!–コメントアウトしたい部分を囲むと非表示になる–>

コメントアウトしたいテキストや画像、タグなどを<!---->で挟みます。

コメントアウトは、テキストやコンテンツを非表示にすることができるほか、コーディング上でのメモ書きとしても使うことができます。

id属性とclass属性

<h1 id=”top”>#をつけると内部リンクで飛ばせる</h1>
<div class=”container”>このclass名が付いているタグにCSSで装飾の指示を出せる</div>

htmlの各タグにはid属性やclass属性という属性が設定でき、idもclassも、CSSのセレクタ(適用対象)として使われています。

なお、idはスクリプトやリンクの参照先としても使用され、以下の注意点があります。

  • 同じHTMLファイル内では1箇所にだけ使用すること
  • 使用できる文字は半角英数字・ハイフンなど(基本的に英数字とハイフンのみの構成がおすすめ)
    コロン・ピリオドもidとしては使用可能だが、CSSのセレクタ名では使用できない
    アンダーバーは一部の古いブラウザでは認識されなくなる
  • 数字や記号始まりはNG
  • 大文字と小文字の区別がある

※classは同じclass名を何度でも使うことができます。

その他のHTMLタグ

テキスト

  • <code>:コンピュータで使うプログラムなどのコードなどを表す
  • <sup>:上付き文字を指定
  • <center>:内容の中央寄せ [非推奨要素]
  • <cite>:出典や参照先を表す
  • <q>:引用・転載文を表す
  • <blockquote>:テキストが引用・転載文であることを示す
  • <ins>:文書の修正で追記された部分を表す
  • <del>:文書の修正で削除された部分を表す
  • <dfn>:定義語を表す
  • <strong>:内容の強調を表す
  • <em>:内容の強調を表す(<strong>の方が強い)
  • <var>:プログラムコードの説明文などで変数や引数の部分を示す
  • <samp>:プログラムからの出力内容を例示
  • <kbd>:コンピュータの操作手順説明などでユーザがキーボードから入力する部分を示す
  • <abbr>:略語を示す
  • <acronym>:略語(頭字語)を示す
  • <br>:段落内の改行
  • <bdo>:文字が左から右に流れるか右から流れるかを指定
  • <sub>:下付き文字を指定
  • <h1>~<h6>:文書中の見出しを設定
  • <pre>:ソース中のスペースや改行などをそのまま表示
  • <p>:段落の指定

文書情報

  • <address>:文書の連絡先/問い合わせ先
  • <body>:ユーザに見せる(ブラウザに表示される)内容の指定
  • <!– –>:HTMLソースの中のコメント(注釈)
  • <title>:文書にタイトルをつける
  • <meta>:文書のメタ情報(文書の内容ではなく文書自体についての様々な情報)を指定
  • <head>:文書自体の設定情報(普通画面上に表示されないもの)の指定
  • <html>:HTMLの文書全体を表す
  • <!DOCTYPE>:HTMLをブラウザにどう解釈させるかの指定

リスト

  • <col>:表(テーブル)の縦列(カラム)の表示をまとめて設定
  • <ol>:順序(通し番号)付きの箇条書きリスト
  • <ul>:順序(通し番号)なしの箇条書きリスト
  • <li>:<ul>や<ol>の箇条書きリストの項目を表す
  • <dl>:定義リスト(用語と説明をセットで並べたリスト)
  • <dt>:定義リスト(用語と説明をセットで並べたリスト)の定義用語部分
  • <dd>:定義リスト(用語と説明をセットで並べたリスト)の説明部分
  • <menu>:リストの表示 [非推奨要素]

  • <caption>:表(テーブル)のタイトル
  • <tbody>:表(テーブル)の本体部分の行をグループ化
  • <tfoot>:表(テーブル)のフッタ部分の行をグループ化
  • <thead>:表(テーブル)のヘッダ部分の行をグループ化
  • <td>:表(テーブル)のセル内容
  • <colgroup>:表(テーブル)の縦列(カラム)をグループに分け、表示をまとめて設定
  • <th>:表(テーブル)の見出し部分
  • <tr>:表(テーブル)の行を指定
  • <table>:表(テーブル)を作成

リンク

  • <a>:アンカー(リンクの出発点/到達点)の設定
  • <area>:<map>で設置するイメージマップ(画像のどこをクリックするかでリンク先が変わる)のリンク領域/リンク先を設定
  • <map>:イメージマップ(画像のどこをクリックするかでリンク先が変わる)の設置
  • <base>:ページ内のリンク先の基準設定
  • <link>:関連する文書などのファイルを指定
  • <dir>:リストを表示 [非推奨要素]

画像・動画など

  • <param>:<object>や<applet>で使うパラメータの指定
  • <applet>:Javaアプレットの設置 [非推奨要素]
  • <object>:画像や動画、音声、プラグインデータ、HTML文書など様々なデータを埋め込む
  • <embed>:音声や動画などのデータを埋め込む[独自拡張要素(HTML5で採用)]
  • <img>:画像の表示

スタイルシート

  • <style>:HTML文書内でのスタイルシートの記述

配置・フォントなど

  • <center>:内容の中央寄せ [非推奨要素]
  • <hr>:水平線の設置
  • <tt>:テキストを等幅フォントで表示
  • <strike>:テキストに打ち消し線を引く [非推奨要素]
  • <s>:テキストに打ち消し線を引く[非推奨要素][HTML5で改訂]
  • <small>:テキストを一回り小さくする
  • <big>:テキストを一回り大きくする
  • <u>:文字に下線を付ける [非推奨要素][HTML5で改訂]
  • <i>:文字をイタリック体(斜体)にする
  • <b>:文字の太字化
  • <basefont>:ページ内の文字の色や種類、大きさなどの基準設定 [非推奨要素]
  • <font>:文字の色や種類、大きさの指定 [非推奨要素]
  • <div>:内容のグループ化
  • <span>:インライン要素をグループ化

フレーム

  • <frameset>:ウィンドウを複数のフレームに分割
  • <frame>:フレーム(ウィンドウを分割したもの)内で表示する内容の設定
  • <iframe>:インラインフレーム(個別にスクロールなどができるページ内の独立した領域)を作成

フォーム

  • <noframes>:フレームを表示できないブラウザで表示する代替内容の指定
  • <form>:入力フォーム(ボタンやテキスト入力欄を含む領域)の設置
  • <input>:1行のテキスト入力欄やボタン
  • <button>:画像や文字を使った汎用的なボタン
  • <select>:メニュー(セレクトボックス)を設置
  • <optgroup>:<option>の要素のグループ化
  • <option>:<select>内で使うメニューの選択肢
  • <textarea>:複数行の入力が可能な入力欄を設置
  • <legend>:<fieldset>でグループ化されたフォムの入力項目へタイトルを付ける
  • <fieldset>:入力フォームの項目のグループ化
  • <label>:入力欄の項目名を表す

スクリプト

  • <script>:文書で使うJavaScriptなどのスクリプトを指定
  • <noscript>:<script>に対応していないブラウザで表示する代替内容の指定

まとめ

求職者支援訓練でwebデザインを学ぶデザイン初心者が、HTMLタグの基本知識を忘備録としてまとめました。

HTML自体はそんなに複雑ではないので、このブログを見るだけで一通り理解できるはずです。

デザイン初心者やブロガーさんの参考になったら嬉しいです!

その他のWEBデザインに関する記事はこちら

WEBデザインスクール・デザナルは月額9800円で安くておすすめ!口コミ・評判も
【無料体験レポ】未経験WEBデザイナーならSHElikesがおすすめ
【未経験からWEBデザイナーに】アラサー女子が選ぶおすすめスクール
【月2178円〜】WEBデザインのサブスク型スクール「侍テラコヤ」がおすすめ!
【無料はキツイ】デザイン初心者が課金するべき画像サイト特集!2022年

コメント

タイトルとURLをコピーしました