CSSを学ぼう!基礎編

副業

【在宅ワーク・副業したい初心者向け】HTMLを学ぼう!タグ編

2019年2月7日

前回、HTMLの基本ということで表示したい情報はタグを使って記述していく、というところまで学びました。
今回は、そのタグについて中でも頻出する特に覚えておきたいものを詳しく解説していきます。

HTMLのタグ

Pタグ

段落タグと呼ばれるもので、ブログ記事や当サイトでもよく使われています。

またpはパラグラフのpです。
ブラウザでの表示例をみてみましょう。

Pタグイメージ

HTMLではどう書くかというと下記のようになります。

Pタグソース

h1タグ(h2〜h6)

h1〜h6タグは見出しを作るためのものです。h1が1番大きく、数字が大きくなるほど小さい見出しになり、h6が一番小さくなります。
ブラウザ表示はこうなります

h1タグイメージ

HTMLの記述は以下の通りです。

hタグソース

imgタグ

画像を貼り付けてブラウザに表示するためのタグです。

これは終了タグが存在しない(タグで囲わない)ので注意が必要です。
また表示可能な画像形式はjpg(jpeg)やpng、gifなどです。

ブラウザでの表示

imgタグ

HTMLの記述

imgタグソース

ここでimgタグには様々な属性を書くことができます。
srcのダブルクォーテーションで囲った部分には画像ファイル名を記述します。
altのダブルクォーテーションで囲った部分には、もし画像ファイルが表示できなかった場合にここで記述した文字(代替テキスト)が画像の代わりに表示されます。

aタグ

リンクタグと呼ばれるもので、他ページへのリンクを貼ったりするのに使用します。

ブラウザ表示

aタグサンプル

HTML記述

aタグソース

aタグ内にあるhrefのダブルクォーテーションで囲った部分にはリンク先URLを記述します。こうすることでクリックされた際には該当urlへ飛びます。

改行タグ

文書を改行するためのタグです

ブラウザ表示

改行イメージ

HTML

改行タグソース

コメント

HTML文書内にコメントを記述することもできます。例えば自分用のメモ書きであったり自由に書くことができ、この記述はWEBページには表示されません。

ブラウザ

コメントタグ

HTML

コメントタグソース

divタグ

特に意味を持たないタグですが、divで囲った部分をブロック要素としてまとめることができるタグです。
まとめることで指定した範囲にスタイルを適用したりすることができます。

ブラウザ表示

divタグ

HTML

spanタグ

divタグと同じまとめるためのタグですが、divタグはブロック要素としてまとめますので改行が入りますがspanタグはインライン要素で文章の一部として利用されますので前後に改行は入りません。

ブラウザ

spanタグ

HTML

spanタグソース

spanタグの使い方は文書の一部の文字色を変えたり線を引いたりするときに使います。

ブラウザ

spanタグ2

HTML

spanタグ2ソース

いかがでしたでしょうか?

上記で紹介した他にも様々なタグが存在しますのでコーディングしブラウザ表示させてみながら覚えていければいいかなと思います。

  • この記事を書いた人
  • 最新記事

マー坊!

元会社員(SE)で現在WEB系フリーランスのマー坊です!✨ 会社員のころは、とにかく働くばかりで毎日がつまらなかった... フリーランスとなり割と心にも余裕ができたことで「働く」だけでは、人生がもったいない!と気づきました。 また、小さな日常にも楽しいことはあるんだなと思ったんです。 そこでこの記事では、「日常や趣味も楽しみながら働く」ことをコンセプトとし、主に以下のことについて書いています。 ✔︎会社員の悩み ✔︎プログラミング ✔︎趣味を楽しんだり... ✔︎日常気になった出来事など

-副業

© 2020 楽するわーく