お久しぶりです。
最近はWordPressにてホームページ作成を１から勉強しておりいろいろとコーディングをしていましたが、その中でもHTMLタグについて勉強することが多くありましたので、まとめをしてみようと思います。
・HTMLとは
HTMLとはWebページを作成するためのマークアップ言語のひとつで、コンテンツをタグで囲みその文章や画像に意味づけをすることを指します。適切なマークアップを心がけるとSEO的に有利になるそうです。
・HTMLを書く際の基本構造
HTMLファイルを書く際には、DOCUTYPE宣言をして、使用するHTMLの種類をまず宣言します
その次にHTML要素を作成し「head」と「body」タグを書きます。
「head」の部分には、タイトル、文字コード、SEOのキーワードなど、ブラウザの裏側の部分の情報を記述するのに使います。
「body」の部分にはコンテンツを記述し、Webページを作成していきます。ここにタグで閉じられたコンテンツを記述するとブラウザがそのHTMLファイルを読み込んでレンダリングをしてくれて、その記述にあったページが表示されることになります。
・ちなみにVSCodeを利用している場合、「！」を空のHTMLファイルに記述した後、VSCoodeの予測機能で出てきたものを選択するとHTMLのテンプレートが自動で記述されます。
作成したHTMLのファイルにVSCodeのテンプレート機能を使うと以下の通りになります。
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>いろいろ書いてありますが、「head」には文字コードやタイトルなどが記述されており、「body」の部分にいろいろ記述することでWebページをつくることができます。デフォルトで「html」タグの中の「lang」の情報がenと英語になっているので<html lang=”ja”>と直しておくと日本語のページとブラウザが認識してくれるらしいです。
・HTMLのタグについて
HTMLタグには「ブロックレベル要素」と「インラインレベル要素」があります。
ブロックレベル要素は文章などのコンテンツを構成する要素などをさし、一つのかたまりとして枠組みなどを作る形で存在していますが、インラインレベル要素はコンテンツ内にハイパーリンクを付けたり、強調したりなど、コンテンツの一部として扱われるそうです。(ここらへんの解釈は筆者の解釈になりますので有識者の方がいましたらTwitterなどで、指摘していただけると筆者が喜びます)
・ブロックレベル要素で使うタグについて
たくさんあって覚えにくいですが、基本となりそうなタグを筆者の独断と偏見で選びましたのでご紹介します。
・h1,h2,h3,h4,h5,h6タグ
これらのタグは見出しで使われるそうです。h1タグでくくると文字がでかく表示され、数字が小さくなるごとに文字が小さくなります。
・divタグ
このタグはめちゃくちゃ便利でコンテンツのグループ化を行うのに使いました。CSSでいじると自由度がとても高く、flexレイアウトと組み合わせるとかなり使い勝手が良いです。
・pタグ
段落を意味するタグです。主に見出しを付けた下のところにつけて文章を配置します。
・tableタグ
表を作るときに使います。ulタグとliタグを利用すると表の中にコンテンツを配置できます。
・インラインレベル要素について
よく使うものに関しては少なそうですが、ハイパーリンクを設定するのに利用したり画像を設定したりと何かと使うものが多そうなのでここも紹介しておきます。
・aタグ
文字にハイパーリンクを設定できます。リンク先にZIPファイルを配置しておくと、クリックしたときにファイルをダウンロードするリンクも作ることができます。
・imgタグ
画像を張ることができます。JPEG、GIF、PNGファイルを扱えます。
以上で簡単なHTMLタグについて紹介を終えますが、ほかにも様々なタグがありこれだけでは簡単なページも満足には書けないので、CSSやほかの勉強したタグも引き続き執筆していこうと思います。