Webページ制作/HTML

HTML構文の全体像を覚えよう(ド素人でも分かるWeb制作)

投稿日:2020年4月11日 更新日:

こんにちは、ハルです。

このカテゴリでは、HTMLを勉強する人へ向けて、勉強を始めた過去の私自身に説明するように、基本からまとめていきたいと思います。

【この記事の対象者】

 ・何も知らないところからHTMLの勉強をする人

 ・ある程度、勉強したけど もう一度振り返りたい人

【以下の人は読まないでください】

 ・すでにHTMLの知識があり、Webページ制作の仕事をしている人など

■HTML構文の全体像を覚えよう

・Webブラウザに表示されるWebページは、基本的に【HTML】と【CSS】で書いてあります。今回は、【HTML】のお話。

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

・すごく簡単に説明すると、文章を「タグ」というもので囲って(マークアップして)、Webブラウザが文章の意味を正しく理解できるようにする言語。

・一般的に、以下のような構成でページが作られています。

<!DOCTYPE html>
<html lang="ja">
 <head>

 </head>
 <body>

  <header>
  </header>

  <main>
  </main>

  <aside>
  </aside>

  <footer>
  </footer>

 </body>
 </html> 

 【各タグの解説】

<!DOCTYPE html>

→「HTMLの文章が書かれていますよ!」という宣言。

<html lang=”ja”></html>

→「書かれている文章は日本語ですよ」というマーク。

<head></head>

→「ヘッド」と呼ばれる部分。Webページの潜在的な情報が中に入ります。Webページ上に出てこない情報です。

<body></body>

→「ボディ」と呼ばれる部分。ここから、実際にWebページ上に表示される文章が書かれています。

<header></header>

→「導入部分ですよ」というマーク。

<main></main>

→「メインのコンテンツですよ」というマーク。

<footer></footer>

→「あとがきですよ」というマーク。

細かい専門的な説明は抜きにすると、このようなかたちなので、まずは上に書いてある流れを覚えて下さい。すべては、それからです。

-Webページ制作/HTML
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


関連記事

Headタグに書くものを覚えよう(ド素人でも分かるWeb制作)

こんにちは、ハルネコです。 この記事ではheadタグの中に入れるものについて書いていきます。 【この記事を読んでほしい読者】 ・HTMLを勉強し始めてすぐの人。 ・これからHTMLを勉強する人。 【以 …

ワードプレスを始める為の作業リストを作ってみました【初心者でも簡単】

この記事は次のような悩みを持つ人向けに書いてあります。 「ワードプレスでブログを始めてみたいけど レンタルサーバーやらドメインやら 専門用語が多くてよく分からない。 ネットやパソコンがド素人の私でも出 …

レンタルサーバー(Xerver)契約の手順【誰でもできる!】

レンタルサーバー(Xerver)契約の手順 このページは「ブログやホームページをはじめるのにレンタルサーバーを借りたいけど、借り方が分からない、もしくはやり方に不安がある」という方向けに書かれています …