【初心者】HTMLを学びはじめたら”なるほど”が増えた話

Learn HTML by yourself

【初心者】HTMLを学びはじめたら”なるほど”が増えた話

Webページを作ろうと初心者が独学をはじめました。

HTML言語は、タグという記述ルールに沿ってなりたっています。初心者がWebサイト記事を書くときには、テーマに沿って機能がついていて、文字を入力すると記事構成は出来上がるのが、初心者でも始めることができる理由です。

ですが、Webサイトはテキストファイルで作られていて、この時に使われているのがHTML言語になります。

HTML+要素の種類

HTMLのタグに関して、属性をプラスすることで文書構造が出来上がります。

文書構成を表す役割を持つ種類

①header (ヘッダー)

⑤aside (アサイド)

②footer (フッター)

⑥section (セクション)

③main (メイン)

⑦article (アーティクル)

④nav (ナビ)

 

意外と読めない人も多いのではないでしょうか。

 

dog
dog

ヘッダーやフッダーはExcelやWordでも使われるのでわかりやすいけど、HTMLでいう要素の役割ってなんだろう?

こんな疑問を解消していきます。

ではさっそく解説していきます。

HTML文章の構成を表す種類

①header(ヘッダー)

私のWebサイトでいうと赤枠で囲んだ部分がheader(ヘッダー)になります。

これはWebサイト内全体のページに構成されるものになり、ExcelやWordで言えば

印刷する時に、本文上部に日付などを標記する部分になります。

<herder>〇〇〇〇〇</herder>

herder(ヘッダー)の役割

画像でもわかるように、ヘッダーはサイト名にロゴや画像、メニューなどを配置します。

herderの使い方

HTMLコードに記述するとこんな感じになります。

  1. <!DOCTYPE html> ➡ htmlのルールに沿って作成していますという宣言
  2. <html lang=”ja”> ➡ どこの国の言葉でWebサイトを作成していますという意味
  3. <herder> ➡ ヘッダーのはじまり
  4. <h2>【初心者】HTMLを学びはじめたら”なるほどが増えた話</h2> ➡ 見出し2で題名を設定したという意味
  5. </herder> ➡ ヘッダーの終わり

 

👆ワードプレステーマを使っているので、”WPHeader”と記載してあります。

②footer(フッター)

footerは、Webサイト内下部に構成されるものです。

赤枠で囲んダ部分がfooter(フッター)になります。

<footer>〇〇〇〇〇</footer>

footer(フッター)の役割

特に決まりはありませんが、一般的にはSNSのリンクやカテゴリー、お問合せなどを配置します。

footer(フッター)の使い方

HTMLコードに記述するとこんな感じになります。

👆ワードプレステーマを使っているので、”WPHeader”と記載してあります。

③main (メイン)

mainは、文書内の主となる大事な部分です。(HTML5で追加された新しい要素)

<main >〇〇〇〇〇</main>

main(メイン)の役割
文書内の主となるコンテンツを表します。
main(メイン)の使い方

HTMLコードに記述するとこんな感じになります。

記事セクションを文書の主となる部分としてmain要素でマークアップしています。

 

 

 

 

 

④nav (ナビ)

nav要素を使うと、ナビゲーションとなるセクションで表します。

<nav>〇〇〇〇〇</nav>

 

 

 

nav(ナビ)の役割

リンクが貼っているところでクリックすると、見たいページへ移動するサイト内の案内掲示板のような役割を持ちます。

nav(ナビ)の使い方

HTMLコードに記述するとこんな感じになります。

 

⑤aside (アサイド)

asideは、補足や脚注、用語の説明などに使われます。(広告など)

<aside>〇〇〇〇〇</aside>

aside(アサイド)の役割

ブログなどに配置する各記事への導線を指します。

aside要素とnav要素を組み合わせて使うこともあります。

aside(アサイド)の使い方

HTMLコードに記述するとこんな感じになります。

⑥section (セクション)

sectionは、一部分、仕切り、一説などのほかと適合して全体を構成するものです。HTML5からの新しい要素です。

<section>〇〇〇〇〇</section>

 

section(セクション)の役割

sectionは、ひとまとまりにするタグです。

section(セクション)の使い方

HTMLコードに記述するとこんな感じになります。

⑦article (アーティクル)

articleは、ひとつの記事としてまとまっているものです。

<article>〇〇〇〇〇</article>

 

article(アーティクル)の役割

ひとつの記事として成り立つものは、articleタグで囲むことができます。

article(アーティクル)の使い方

HTMLコードに記述するとこんな感じになります。

sectionとarticleタグのちがいについて

articleは、ひとつの記事としてまとめることができますが、sectionは、囲む範囲に悩むことがあります。articleでひとつの記事としてまとめておいて、sectionとしてはタグを使用しないというWebページもあります。

自分の運営しやすい要素を覚えていけると良いと思います。

ここまでが、全体のレイアウトになります。

まとめ

さて、いかがだったでしょうか。

だいぶ説明が端折られている気がしますが💦タグの要素の役割を学ぶことができました。

テキスト画面をみてみると、herderやfooterなどのタグが見えてくるようになりました。

ここまででもまだまだ序章にすぎません。

Webページをカッコよく作っていくには、ここからが勝負だと思います。

どのシーンでどのタグを使うのか、しっかりたたきこんで覚えていきましょう。

sponsored Links

 

コメント