【HTML】HTMLの基本的なタグ
こんにちは。ダイスケです。
本日はHTMLをより便利に使うために、
様々な性能を持つタグをご紹介します。
本日の内容
本日のゴール
"タグにどんな機能があるか知識が付く" です。
今回で紹介しきれないほど種類はありますが、
その中でも良く使うタグをご紹介します。
基本タグの役割
まず全体を構成する<html>タグです。
この<html>タグの中に全て記入します。
イメージは大きな箱のようなものです。
さらに<html>タグの中に<head>,<body>のタグがあります。
この2つは<html>タグの大きな箱の中に、
<head>,<body>の2つの箱が入っているイメージです。
<head>タグはコンピューターが読み取るデータを記入します。
なのでブラウザなど可視化できません。
<body>タグは、私たちが良く見るサイトの中身を記入する場所です。
この中に様々なタグを記入できます。
ウェブサイトの基本構成はこの3つのタグで出来ています。
タグの種類
こちらでは良く使うタグをご紹介します。
[headタグに記述するタグ]
<title> : ウェブサイトのタイトルを表記します。
<meta> : 文字コード(日本語用)などのデータを記入します。
<link> : 他のファイルデータなどを参照するときのリンクデータを記入します。
<style> : CSSをここのタグに記入してデータを反映することができます。
[bodyタグに記入するタグ]
<p> : 文章の段落を表すタグです。
<h1>~<h6> : 見出しを表すタグです。h1が一番大きくh6が一番小さい見出しです。
<div> : 特別な意味は持ちませんが、このタグで囲まれたものをまとまりとして扱えます。
これらは頻繁に使うタグなのでしっかり覚えていきましょう。
次から実際にタグを使って機能を見ていきます。
下の画像はエディターの編集画面です。
このように記入したら、サイトには次のように反映されます。
上から順に見ていきましょう。
<title>タグに書かれたものは、左上の所に表示されます。
練習サイトと表記されてるのが分かります。
次に<body>タグの中に記入している<h1>~<h6>タグに書かれた、
"プログラミング"の文字を見てください。
1~6で文字の大きさが変わっているのが分かります。
見出しの重要度で使い分けていきましょう。
その下の<p>タグを見てください。
こちらは主に文章などを書くときに使用します。
こちらは見たそのままで反映されるので理解しやすいと思います。
次のグレーで囲まれた文字を見てください。
こちらは見た目で分かりやすいように色を付けています。
<div>タグはこのように他のタグを箱のように囲むタグとなっています。
グループでまとめたいときに役立ちます。
終わりに
今回は簡単な説明でしたが、
HTMLでよく使うタグについて書いていきました。
プログラミングを始めるにおいて、
結果が目に見える方がモチベーションも上がります。
なので一緒にこの記事を読んで学習をすすめてみてはいかがですか？
では、最後までご購読ありがとうございました！
