Web制作を学ぶDay6 【重要なHTMLタグ ※初心者向け】

上質な情報発信を続けてお役に立てるようサイト運営費用を賄うために、Googleアドセンス・アフィリエイト等を利用しており本記事はプロモーションを含みます。

タック

今回はHTMLの始め方と重要なタグの説明をしていくよ

Baby panda

前に習った「VSコード」を使うんだね〰

この記事を読むメリット

HTMLの書き方が理解出来る
VSコード内でのフォルダの作り方が理解できる
HTMLの重要なタグ１０個が理解出来る

HTMLを書き込もう

早速ですが、前回の記事で学んだ「VSコード」を使って実際にHTMLを書いて行きます。

VSコードを開くと何も書いていない入力ページがでてきます。初めての方は何から始めたらいいのだろうか悩むと思います。そこでまずは下記の文を入力します。

これからHTMLを書きますよという形になります

「定型文」を瞬時にだす方法

【！（ビックリマーク）＋Enter】又は【！＋Tabキー】でこちらの定型文が一発で出てくるやり方があります。いちいち書き込む必要が無いのでとても作業効率が上がります

それぞれに意味がありますのでよかったら意味も理解しておいてください。とは言っても、定型文ですのでこれはこんなものだという感じでいいので難しいと感じる場合は飛ばしてもらっても問題ありません。

下のブロック内に意味を書いています

※コードはすべて半角英数で書くようにしましょう。

<!DOCTYPE html>

<html lang=”ja”>　←言語を表している。英語なら「en」日本語なら「jp」

<head>　←HTMLの情報を書き込むタグ（Web上には表示されません）

「edg」を使いなさいということではなくてInternet explorerなら最新状態にしてくださいということ

説明文を書く所で、Webページの説明にでる部分となります

<title>Document</title>　←ブラウザのタイトルバーに表示されます

</head>

<body>　

ここにHTML文章を書き込んでいきます、文章の内容です

</body>

</html>

下記の画像がHTMLの大きな枠組みとなります。<head>内はHTMLの説明を記入、<body>内はWebページの内容を書き込む場所となります。基本的に <body>内に書き込んで行くことだけおぼえてください。

VSコード内でのフォルダの作り方

ここでHTMLの作成から脱線しますが、大事になってくることなのでここで理解しておきましょう。とても簡単にできますのでご安心ください。

私もそうだったのですが、フォルダやファイルをどのように作っていくのかよくわかりませんでした。決まった形があるわけではなくありませんがよく書籍やブログなどで作る基本的な作り方をここでは身につけてほしいと思います。キレイにまとめる事で作業効率も上がりますので私個人こういった細かい所は大切だと思っています。

HTMLの基本的な形

過去にHTMLの基本を紹介しましたがおさらいしておきましょう。基本の形を覚えると今後はネットで必要なタグを調べると使いこなせるようになります。

※【img】などタグの種類によっては「終了タグ」というものがないものもあります。この記事でも紹介はしていくのでそういったタグを使う際は注意が必要です。

HTMLの基本の形過去の記事はこちら

HTML基本の形

HTMLでは基本となる文字の入力が必須となります。

その入力の順番として基本の形が【開始タグ・テキスト・終了タグ】となります。この順番は必ず覚えてください。

では実際にどのように入力すると、Web画面が表示されるのかを図で解説します。下記の画像が入力する値です。

豆知識

HTML内で改行やスペースを使うと思いますが、Web表示ページには反映されません。

コードを書き込む際は自分や相手が見てわかりやすいよう工夫していきましょう。

基本的なコード１０選

表内のものは基本的なタグになります。今回は１０個に厳選して紹介します。HTMLタグは全部で１００種類程度あるのですべて覚えきるには時間がかかりすぎてしまいます。まずは基本的なものから学んで使う時に都度他のものを調べて使っていきましょう。下記の【HTML書き込み】の部分をコピーして実際にVSコードに貼り付けると【Webページ上での表示】のように表示されますので一度試して見てください。慣れてきたら自分の思う文章を入れ込んで使い慣れていきましょう。