2020年10月28日

コーディング勉強 初心者むけ【HTML-body要素編-】

コーディング 初心者の方にむけた、HTMLの構成についてです!

前回はHTMLのhead要素についての記事でしたが、body要素について説明していきます。

SEO対策にもなり、価値のあるサイト作りにはかかせないコンテンツのグループ化。しっかり学んでいきましょう!

前回のおさらい。そもそもHTMLってなに?

「HTML」とはHyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略です。

分解して意味を読み解くと

「ハイパーテキスト」=複数の文書を関連付けるしくみ

「マークアップ」=文章の各要素に目印をつける

「ランゲージ」=言語

つまり、見出しや段落などの要素を「HTMLタグ」で目印をつけてコンピューターが文章構造を理解できるようにしていきます。

HTMLの構造

◎基本的なHTMLのタグ構成

<!DOCTYPE html>

<html lang=”ja”>

<head>

<meta charset=”UTF-8”>

<title>タイトル</title>

</head>

<body>

</body>

</html>

body要素

Webブラウザに表示させる内容を記載します。私たちユーザーがWebブラウザで見ているサイトコンテンツはすべてbody要素に記述します。

body要素内で使用する要素

body要素はそのページの内容を表す要素で、非常に多くの要素が使用されます。なので、今回は文章構造の基本となる主な要素をご紹介します。

p要素

P要素は「paragraph(パラグラフ・段落)」も略称です。主に文章の段落に使用され、本文や説明文などが入ります。

【終了タグ】必須

h1〜h6要素

文章の見出しを表す際に使用します。H1〜h6までの6種類があり、h1要素はもっとも重要度が高い見出しで、h6はもっとも重要度が低い要素です。見出しが小さいほどより上位の見出しを表します。

単純に大きい文字を使いたいからh1を使うということがないように、文書の段階構造を意識しましょう。

【終了タグ】必須

section要素

HTML文書の中で、章や節など単独のセクションを表します。1つの記事を囲う枠が要素にあたります。必ず見出しを入れることを推奨されています。

<section>

<h1>見出し</h1>

<p>内容</p>

</section>

【終了タグ】必須

article要素

その内容だけで独立したコンテンツとして成り立つ場合に使用します。例えばフォーラムの投稿、ブログ記事などが含まれます。

<article>

<h1>タイトル</h1>

<section>

<h2>見出し</h2>

<p>内容</p>

</section>

<section>

<h2>見出し</h2>

<p>内容</p>

</section>

</article>

【終了タグ】必須

nav要素

メニューなどページ上の主要なナビゲーションを表します。

【終了タグ】必須

aside要素

サイドバーなど、補足情報を表す要素です。メインとは関係しているけどメインコンテンツから切羽なることができるセクションを表します。

【終了タグ】必須

div要素

複数の要素をひとつにまとめることができます。おもにレイアウト目的でグループとしてまとめるのに使用されることが多い要素です。

<div>

<p>内容</p>

<p>内容</p>

</div>

【終了タグ】必須

a要素

a要素はハイパーリンクを指定する要素です。href属性でリンク先を指定します。

<a href=”URL”>SeekNextのサイトです</a>

これで「SeekNextのサイトです」にリンクがはられた状態になります。

【終了タグ】必須

img要素

img要素は画像を表す要素です。src属性で画像ファイルの場所を指定します。Alt属性には代替テキストを入力します。(画像が利用できない環境の場合代替テキストが表示されます)

<img src=”画像ファイル名” alt=”プロフィール画像”>

【終了タグ】なし

まとめ

今回はbody要素についてのまとめでした!記事で紹介した要素はサイト作成の際使用されることが多いものを集めてみました。

一度に理解するのが難しくても、実際に手を動かしながら、わからなくなったら調べることを続けていけば段々と身についてくるかと思います。

必要なところに必要な要素を使えるようになりましょう!

次回は相対パスについてです。