投稿日:

【WEB基礎】2−2章　HTMLタグについて

今回は、HTMLで使われるタグについて勉強していきたいと思います。

HTMLタグの数は110種類くらいありますが、これを全部覚えるのは難しいです。また全てのHTMLタグを使うわけでもないのでよく使われるタグのみ勉強していきたいと思います。

よく使われるHTMLタグ

https://www.advancedwebranking.com/html/

上記は、全世界で最も使われているHTMLタグになります。では、さっさとみていきましょう。

HTMLタグ

<html>

HTMLで作成する際には必ずこのタグの中に記述しなければならないです。上記の表でもわかるように100%の理由がそれです。

<html>
   <head>
   </head>
   <body>
   </body>
</html>

<head>

ウェブページの情タイトル、キーワード、紹介などを記述します。外部CSSファイルのリンクを記述もこのタグの中に記述します。

<head>
    <meta charset="UTF-8">
    <meta name="description" content="introduce anveloper">
    <meta name="keywords" content="HTML, anveloper">
    <title>anveloper web page</title>
</head>

<body>

HTML文書の文章や画像など、実際にブラウザの画面上に表示される内容を指定するタグです。

<body>
  <h1>これは見出しのタグです</h1>
  <p>これは段落を指定するタグです</p>
  <a href="http://www.google.co.jp">これはリンクです。Googleへ遷移されます</a>
</body>

<title>

文書にタイトルをつけるタグです。<head>タグ内に記述します。このタグに記述した文字列はウェブブラウザのタブ名に表示されます。

<head>
    <title>anveloper web page</title>
</head>

<meta>

文書のメタ情報を指定し、ブラウザや検索ロボットにWebページの情報を知らせるためのタグです。

メタ情報は、サイトの制作者や文書の説明・キーワードなどの情報や文字コードの指定などを記載するのが一般的です。

<head>
    <meta charset="UTF-8">
    <meta name="description" content="introduce anveloper">
    <meta name="keywords" content="HTML, anveloper">
</head>

<div>

特に意味を持たないタグですが、HTMLタグをブロックしてグループ化するときに使われます。
特に意味を持たない意味で<span>タグと似ていますが、<span>タグは文章の一部をCSSだったり制御するときに使われます。

<body>
    <div class="my_introduce">
      <h2>Anveloper</h2>
      <p>こんにちは</p>
    </div>

    <div class="my_skills">
      <h2>スキル/h2>
      <p>HTML、CSSなど</p>
    </div>
</body>

<a>

Anchor（アンカー）の略で、ウェブページや外部サイトへの遷移するときに使われます。

aタグの属性はいくつか説明していきたいと思います。

  • target：リンク先の文書を表示させる方法を指定します。
    • _blank：リンク押下時、新しいタブが開かれます。
    • _self：リンク押下時、ページ遷移されます。（targetを指定していない場合、defaultとして_selfとなります。）
    • _parent、_topなどもありますが、あまり使ったことがないので、ここではパスします。
<a href="http://www.google.co.jp">Googleへ遷移されます</a>
<a href="http://www.google.co.jp" target="_blank">新しいタブでGoogleを開きます</a>

<script>

JavaScriptやVBScriptなどのスクリプトを文書内に埋め込んだり外部スクリプトを読み込んだりするために使用するタグです。JavaScriptの方がよく使われるので、type属性にJavaScriptを指定して使います。

<script type="text/javascript">
   document.getElementById("introduce").innerHTML = "Hello     anveloper!";
</script>

<img>

ウェブページにイメージを挿入するときに使われるタグです。<img>タグは閉じるタグがないし、１つのタグは１つのイメージしか挿入できません。

必須属性としては「src」属性がありますが、イメージのパス（経路）を指定します。

縦幅（height）、横幅（width）属性も指定できますが、指定しないとイメージ原本の大きさで表示されます。

なお、「alt」属性には画像を表示できないブラウザの場合に、画像の代替テキストを指定します。

<img src="anveloper.jpg" alt="Anveloper Image" width="400" height="400">

<p>

段落を指定するタグです。ブロック要素なので、<p>タグで囲まれたコンテンツの後に改行が挿入されます。

<p>
   こんにちは、Anveloperさん
</p>
<p>
   HTML、CSS勉強は楽しいです。
</p>

<li>

リストの項目を表示するために使用するタグです。

よく<ol>タグや<ul>タグで囲んでリストの項目を並べるときに使用します。

<ul>
   <li>項目１</li>
   <li>項目２</li>
</ul>

<ol>
   <li>項目１</li>
   <li>項目２</li>
   <li>項目３</li>
</ol>

<ul>

unordered list（順序がないリスト）の略で、順序がない箇条書きのリストを表示する際に使用するタグです。

<ul>
   <li>項目１</li>
   <li>項目２</li>
</ul>

<ol>

ordered list（順序のあるリスト）の略で、順序のある番号付きのリストを表示する際に使用するタグです。

「type」属性に「1、A、a、I」指定することによって項目番号のタイプを変更できます。

<ol>
   <li>項目１</li>
   <li>項目２</li>
   <li>項目３</li>
</ol>

<br>

改行を行うタグです。HTMLは基本インライン要素なので、brタグを入れるだけで改行させることができます。

<p>
   こんにちは<br> 
   Anveloperです。<br> 
   よろしくお願いします。
</p>

<input>

<form>タグで作成したフォームの中でユーザーが情報を入力する欄やボタンなどの部品を作成するため使用します。

// https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_test
<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

type部品の形式を指定します。
text、 password、radio、 checkbox、 
file、 hidden、 submit、 image、 
reset、 buttonのような値を指定できます。
name部品の名前を指定します。
値は文字列を指定します。
value初期値を指定します。
値は文字列を指定します。
sizeinputタグの幅（入力フィールドの大きさ）を指定します。
値は数字を指定します。
maxlength入力できる最大文字数を指定します。
値は数字を指定します。
checkedチェックボックスを選択されている状態にします。
typeがcheckboxの場合、指定します。
disabled部品を無効化します。
readonly書き換えを禁止し、読み出し専用にします。
acceptプログラム側が受け入れるMIMEタイプを指定します。
値はMIMEタイプを指定します。
src表示する画像のURLを指定します。
alt画像の代わりに表示する代替テキストを指定します。
usemapイメージマップの関連付けをします。
ismapサーバーサイド・イメージマップを表示します。
align表示位置を指定します。
top、middle、bottom、left、rightが指定できます。

<form>

入力・送信フォームを作成する際に使用する要素です。

formタグ内には「input」「label」「textarea」などの使って入力を行い、submitボタンを使って送信を行います。

action実行（サブミット）された時の動作を指定しますが、フォームの送信先（どこに送信するのか）のURIを指定します。
なお、HTML5では必須属性です。
methodWebはHTTP通信を行うため、サーバーにデータをHTTP MethodであるGETまたはPOSTで指定します。
<form action="/action_page.php" method="POST">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

終わりに

今回は、HTMLタグについてみてみましたが、整理しながら自分も勉強になりました。HTMLタグは今回に記述した以外にもいっぱいあるので、詳しくは以下のサイトを参考にしてください。

https://html-coding.co.jp/annex/dictionary/html/

https://www.w3schools.com/tags/

コメントを残す