ちゃっかり東京でエンジニア

砂丘から飛び出した文系エンジニアのブログ

HTML初心者向け!よく使うタグの基礎をマスターしちゃおう!<body>編

 

 

 

こんにちは、きのです!

 

 

今回はHTMLを書いていく上で覚えておきたいタグの中でも、

<body>要素で主によく使われるタグについて解説していこうと思います。

 

このページでは、

・HTMLでよく使われるタグがわかります

・タグの使い方やなんのタグなのか理解ができます

 

 

◎この記事を読むと・・・

よく使うタグの基礎をマスターできます!他の人に教えられるレベルにもなっちゃうかも?!

 

 

 

 

覚えておきたいタグまとめパート1

body

 HTMLの本文を示すタグです。文書内にひとつだけ、<html>タグの中に配置します。

 

body要素の配置図

 

h1〜 h6

見出しを記述する際に使用します。h1のhとは、headingの略です。

1〜6までの数字は見出しの順位のようなもので1が最上位(大見出し)で、

数字が小さくなるにつれて、順位が下がっていきます。

 

h1からh6要素の配置図

h1〜h6までの要素をこのように書いてみると・・・

h1からh6要素の表示例

Webページではこのように表示されます。

 

p

文書内の段落を示すタグです。pとはparagraph(段落)の略です。

段落とは、文章において見やすくまとめられた文のかたまりのことを指します。

段落といえば、文章の頭が字下げされているイメージですが、そのような機能はないので注意です。

p要素を並べると、要素と要素の間に1行分の空白が入ることが特徴です。

 

p要素の配置例

p要素と、p要素と同じブロック要素であるdiv要素を使って表示の比較をしてみます。

それぞれ同じように書くと・・・

 

 

p要素の表示例

このように、p要素の方だけ行の間に空白が入ります。

 

a

リンクを示すタグです。aはAnchorの略です。

href属性で指定したWebページ、同一ページ内のid属性の場所、ファイル、他のURLへリンクさせることができます。

 

また、メールソフトを起動して、指定したメールアドレスに送信したり、指定した電話番号に発信したりすることもできます。 

 

記述例 ↓

a要素の記述例


 

img

HTMLの文書内に画像を表示させます。imgはimageの略です。このタグには、src属性が必須で、ここに画像ファイルのURLを指定します。

 

記述できる属性

alt属性・・・少し難しいですが、画像が読み込みエラーやファイル形式の非対応により、表示されなかった場合の代替テキストを表示します。

 

また、音声による読み上げソフトがalt属性でしていした内容を読み上げることにより、画像が何を表しているかユーザーが知ることができるんです。

 

width属性・・・画像の幅を数値で指定します。width="120"のように単位はつけなくてOKです。

 

height属性・・・画像の高さを数値で指定します。height="80"のように単位はつけなくてOKです。

 

br

HTMLを書く時、キーボードのEnterキーを押して改行しても、実際のWebページ上では改行されません。

そのときに登場するのが<br>タグです。 このタグは改行を示すタグで、改行が文章として必要な時(詩や住所など)このタグを使用します。

brタグは終了タグが必要ありません。(記述例をみてみましょう!)

 

このタグは段落の間を空ける、余白を作る、横幅を揃えるといったデザインをする目的で使用してはいけないということも覚えておきましょう。

 

記述例 ↓

brタグの記述例

このように、brタグを挟むと・・・

 

brタグを使った場合の表示

brタグを書いたところで改行されています。

 

 

*今回のちょこっと行動*

 より理解を深めるためには、実際にコードを書いてみることをお勧めします!

以下のステップで実際にコードを書いてみてください!

1:テキストエディタを開く

2:今回の記事の「h1〜h6」を参考にして、テキストエディタに書いてみる

3:⌘+S(Mac)または Ctrl+S(Win)で保存!

4:ブラウザを開く

5:3で保存したファイルをドラッグ&ドロップ

6:ブラウザでどれくらいの大きさになるか確認!

 うまくいったでしょうか?

 

まとめ

いかがでしたでしょうか。すこし難しい部分もありましたが、まずは基本的な使い方を理解してもらえればOKですよ!そしてこれらのタグはHTMLを書いていく上でよく使うタグばかりなので、しっかり覚えておいてくださいね!

 

それではまた。別の記事でお会いしましょう^^

 

 

このブログでは、知識ゼロからWebページを作成するまでに必要な情報を

わかりやすく解説しています!

Webの勉強、HTML&CSSの勉強をはじめたばかり、また、これから始めようと思って

いる方を、全力でサポートします!

ご質問、ご意見、大歓迎です!!

 

Twitterでも情報発信をしているのでのぞいてみてください( ・∇・)

  

最後まで見てくださり、ありがとうございました!