記事の作成1(HTML初級①)

ここでは私がweb作成を行って使えるタグ・覚えていたらいいと思うタグを紹介します

はじめに

実際にコードを書くにはコードエディターをダウンロードする必要があります。

おすすめプログラミングエディタ9選！初心者向けに選び方も解説

どのコードエディターいいか迷っている方・使用方法が分からない方はこちらを参照してください。

ちなみに私はvs codeを使用しています。

タグ(要素)とは

タグとは文字に意味を与える印のようなものです。別名では要素といいます。

例えば<h1>Hello Bollboy</h1>と記載すると

記載したhtmlファイルを開くと上記のようになります。

<h1>を見出しタグといいます。文面のはじめの<h1>を開始タグと言い、文面の最後にくる</h1>は閉じタグとなり開始タグと閉じタグに間に文面を書くことによって見出しの文書だと証明できます。

タグの種類は約110個あるといわれすべて覚えるのは極めて難しいです。実際に使用する頻度が高いタグや初心者が覚えた方がいいタグを紹介していきます。

タグの名前・意味・例題

ｐタグ

pタグとは英語で段落を意味するparagraph（パラグラフ）のことです。

ｐタグはh1タグより文字が小さくなっており主に説明分などに使用することが多いです。

aタグ

aタグとはリンクの出発点や到達点を指定するタグです。Anchor（アンカー）の略

プログラミンROYの部分をクリックすると私のブログサイトが開くようにできます。

hrefは属性といいリンク先を指定できます。

imgタグ

imgタグとはimageの略で、文書内に画像を表示するためのタグです。
表示する画像ファイルはsrc属性で指定し、WEB上ではGIF形式、JPEG形式、PNG形式の画像形式を指定することができます。

画像をサイトに載せることができました。

alt属性は画像が表示できない場合に画像の代替のテキストを表示するものです。今回載せた画像が表示されなかった際はテキストでprofileと表示されます。

section(セクション)タグ

sectionタグとは文書の章や節を示す役割を持ちます。 文章の一つのまとまりを作るために使うものです。

これは見出しタグやｐタグ、imgタグを1つのグループにしています。そうすることでCSS（htmlを色付けするもの）での編集が少し楽になります。

figure(フィギュア)タグ・figcaption(フィギュキャプション)タグ

figureタグは、写真、挿絵、図表、コードなどのコンテンツのまとまりを表します。

figureタグ内にあるその他のコンテンツを説明するキャプションや凡例を表します。

sectionと似ており分かりにくいと思いますがsectionは章のまとまりでfigureは画像と画像の題名をまとめたものとなっています。