HTML プログラミング

【初心者向け】HTMLの基礎知識【入門】

投稿日:2019年1月3日 更新日:

入門編ではHTMLがどのようなものか概要を解説しました。

今回はHTMLを書くにあたっての基礎知識をご紹介します。

入門編をまだご覧になっていない方はこちらからどうぞ

自分でHTMLを書きながら学習をしたほうが理解しやすいので、環境構築がまだの方はこちらから済ませてください。

HTMLの基礎

まずはHTMLの基本構造から身につけましょう!

タグではさむ

まずはHTMLのサンプルを見てみましょう。

これを表示してみると、

このようになります。

HTMLでは上のサンプルのように「<なんとか></なんとか>」このような形にします。この「なんとか」のことを「タグ」と呼びます。 例えば、<h1></h1>は「h1(エイチワン)タグ」のように呼びます。

また、 <h1></h1> の最初のカッコの「<h1>」は「開始タグ」、最後のカッコの「</h1>」は終了タグと呼びます。

このように、タグでさむことがHTMLの基本構文になります。

タグに属性をつける

属性はタグに追加の情報を書きます。

例えば、「<a></a>」というタグがあります。これは他のページに飛ぶためのリンクを作ることができます。

次のように書いたとすると

ブラウザ上では以下のように表示されます。

 

よく見てみると、「a」タグの中に「href=”https://wakarublog.com/”」と書かれています。

この「href」が属性です。「a」タグでは、「これはリンクを表すよ~」ということしか示していません。

そこで、「href」という属性を使うことで、クリックしたらどこに飛ぶのかを示します。

ですから、今回の場合ですと、

  • 「a」タグ→「わかるブログへ」はリンクですよ
  • 「href」属性→ 「https://wakarublog.com/ 」ここに飛んでください

と「href」属性は「a」タグに情報を追加していますね。

まとめ

<タグ 属性=”情報”></タグ>

 

このように「開始タグの中に追加の情報が入ることがある」ということを知っておきましょう。

最初はタグや属性の種類は暗記する必要はありません。見ながら書ければ問題ないです。基本的なタグなどは使っていくうちに覚えるので、暗記することに時間を使わないでください!

HTMLをブラウザで表示させる

HTMLをブラウザで表示させるには、上で書いたようなサンプルのようなコードは実はあまりよくありません。

というのも、ブラウザがファイルを読み込んだ時に「このファイルはHTMLで書かれているよ!」と教えてあげるなど、コンピュータにわかりやすく説明をしてあげなければいけません。

そこで、ブラウザに表示する前に書くべきコードを見ていきましょう!

今回作るのは以下のようなものです。

コードは以下の通りです。

 

HTMLファイルの作成はこちらの記事の「ファイルの作成」を参考にしてください。

コードの解説

<!DOCTYPE html>

1行目にある<!DOCYTPE html>ですが、「これはHTML文書ですよ」と文書宣言をしています。
このタグには終了タグはいりません。また、画面には表示されません。

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

2行目に「<html lang=”ja”>」、15行目に「</html>」と書かれています。
これは「<html></html>で囲まれているところはHTMLで書かれているよ」という意味です。

「lang=”ja”」というのは、「html」タグの属性で、「日本語の文章が書かれているよ」という意味です。

<head></head>

3行目に「<head>」、6行目に「</head>」が書かれています。
これは「この文書自体の情報を書く場所」です。
画面には表示されません。

今回は中に「title」タグがあります。
「title」タグではWebページのタイトルを設定します。

他にも「meta」タグなど、いろいろありますが最初は気にしなくても大丈夫です。

<body></body>

7行目に「<body>」、14行目に「</body>」が書かれています。
これは「この文書の本文を書く場所」です。
サンプルで書かれたものはここに入っていますね。

ここに書かれたものがWebページの本文として表示されます。

まとめ

いかがでしたか?

今回はHTMLの基礎編についてご紹介しました。

最初は慣れなくて分かりにくいかもしれませんが、プログラミングを勉強する上で重要な基礎となります。

何度も書いて、まずは慣れるところから始めましょう!

次のステップ

-HTML, プログラミング
-,


comment

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

関連記事

誰でも分かる!HTMLの環境構築方法

今回はプログラミング経験ゼロの方でも分かる、HTMLの環境構築を解説していきます! 「そもそもプログラミングでやりたい事が決まってない…」 という方はまず「プログラミング初心者が最初にやる …

【初心者向け】HTMLの基本的なタグの使い方

今回はHTMLの基本的なタグの使い方を解説していきます! 前提条件 HTMLの環境構築が済んでいること 「HTMLはタグを使って書く。」の意味が分かる HTMLの環境構築が済んでいない方はまずこちらの …

【初心者向け】HTMLとは?【入門】

­プログラミングを始めてやる方やホームページを作りたい方がまず目にするのが「HTML」だと思います。 しかし、 「そもそも、HTMLって何?なにができるの?」「ちょっと使ってみたけど、なんだかよくわか …

プログラミング初心者が最初にやるべきこと

「プログラミングを始めたいけど、何から勉強すればいいかわからない…」「プログラミング言語?なにそれ、おいしいの?」 そのように悩んでいる方も多いのではないでしょうか。 そこでこの記事では、 …