【副業を始めたい人必見!】副業開始マニュアル

【HTML初心者】HTMLとはなにかわかりやすく解説!

【HTML初心者】HTMLとはなにかわかりやすく解説! HTML

どうも!ニシドラ(@nishidorablog)です。

ニシドラ
ニシドラ

この記事ではHTMLとはなんなのか?についてわかりやすく解説します。

記事の内容としては、HTMLがどんなプログラミング言語なのかや、基本構成とHTMLタグ(コード内で使う文字列)の意味について解説していきます。

【HTML初心者向け】まとめ記事一覧

スポンサーリンク

HTMLとは?

HTMLとは「 Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ) 」の略で、WEBページの土台となるファイルを作成するためのマークアップ言語です。

普段、僕たちが見ているWEBサイトやスマホアプリは基本的にはこのHTMLで構築されています。

HTMLは「<」と「>」に挟まれた「タグ」と呼ばれる文字列で構成されています。
タグはいろいろな種類があり、用途別に使い分けます。

タグを文字列で囲むことにより、コンピューターが認識して表示できるようになります。

HTMLを確認する方法

WEBサイトのHTMLを見てみましょう。

WEBサイトで右クリックし、「ソースの表示」を選択するとこのような画面が表示されます。

ソースコード例

このようなソースコードは、すべてのWEBサイトで見ることが可能なので勉強目的で見ることも良いと思います。

HTMLファイルの基本構造

先程、WEBサイトのHTMLを見て「なんか難しそう…」と感じた方もいると思いますが、基本構造は簡単です。

HTMLファイルのソースコードは<html>で始まり、</html>で終わるように書かれています。
<html>タグの間に<head>タグや<meta>タグ、<titre>タグ、<body>タグなどが挟まれています。

例として下のようなコードを示します。

<!doctype>
<html lang=”ja”>
<head>

<meta charset=”utf-8″>
<title>HTMLファイルについて</title>
<meta name=”description” content=”HTMLファイルの構成を解説”>
</head>
<body>

<h1>基本構成</h1>
<p>headタグで構成されている</p>
</body>
</html>

WEB上で開くとこのようになります(<head>~</head>の間はブラウザー上には表示されません)。

ブラウザー上の表示結果

次に上のコードで使われているタブの意味を説明していきます。

!doctype htmlとは

「<!doctype html>」はdoctype(ドクタイプ)宣言と呼び、そのページがどのバージョンのHTMLで、どの仕様に合わせて作成されているのかを書いています。

現在は「HTML5」というバージョンが主流で、当サイトで記述されているHTMLは基本的にHTML5のことです。

html~/html

doctype宣言の後に書きます。
意味は「これはHTMLの文章であること」を表しています。

「lang」は「language」の略で、WEBページの言語を設定できる部分です。

「ja」はjapaneseの略で日本語のことです。

英語表記の場合はEnglishの頭文字をとって「en」になります。

head~/head

この部分はページのタイトルや説明文、外部のリンクなど、ページの情報を書きます。

サイトを装飾する「CSSファイル」もこの<head>タグの中で関連付けます。

<head>タグはWEBページの内部情報を書いているので、ブラウザーでは表示されません。

meta charset=”utf-8″

「meta」とは、「メタ要素」と呼ばれ、言語や説明文などの情報を示すときに使います。

「charset=” “」の「” “」部分に文字コードを指定しています。

「utf-8」を指定することで文字化けを防ぐことができます。

正しく指定されていないと文字化けをしてうまく表示されない場合があるので必ず指定しましょう。

title~/title

WEBサイトのタイトルを<title>タグで書きます。
この名前が検索時に表示されるページタイトルになります。

meta name=”description” content=”~”

このタグはページについての情報を書きます。
「Google」や「Yahoo」などの検索エンジンでページタイトルと共に下に説明文として表示されます。

body~/body

HTMLの本文を書いていく部分です。

これまで紹介してきたタグは「メタ情報」と呼び、サイトの内部的な情報を記述していたのですが、「body~/body」には普段僕たちが目にしている文章や画像、リンクのような外部的な情報(目に見える情報)を入力します。

入力することで実際にブラウザー上で表示させることができます。

まとめ

ここまでHTMLの基本的なことを書いてきました。まとめると以下の内容です。

  • WEBサイトの土台を作るためのマークアップ言語
  • すべてのWEBサイトがHTMLで作成されている
  • タブと呼ばれる文字列で囲む
  • 基本的な構造としてhtmlタグ、headタグ、bodyタグで構成されている(他に多数のタブを使う)

これはHTMLを勉強する上で本当に基本で大切なことなのでしっかり覚えましょう。

次回は、「HTMLファイルの作成方法」について解説します。

コメント

タイトルとURLをコピーしました