Webサイトを公開する上で最低限知っておくべきHTMLの知識(HTML入門)

ここではWebページを形成するHTMLについて、WordPressも絡めながら説明していきます。

HTMLとは

HTMLとはHyper Text Markup Languageの略で、プログラミング言語の一種です。

下の図をこのホームページではよく用いていますが、Webサーバから送信され、PCやスマホなどのクライアント側で受信されているファイルの一つがHTMLファイルになります。

クライアント側ではウェブブラウザに読み込まれ、HTMLを解釈してウェブページを描写して表示します。HTMLはウェブブラウザが解釈して表示できるよう、ウェブページをどのように構成するか・どんな情報を表示させるかが記述されています。

HTMLファイルの中身

実際にHTMLファイルの中身を覗いて見ましょう。Webサーバから受け取ったHTMLファイルはウェブブラウザから中身を見ることが可能です。ブラウザ毎に見る手順が異なるのでいくつか下記に記載しておきます。

Google Chrome:

右クリック→ページのソースを表示

Internet Explorer:

右クリック→ソースの表示

Safari:

少しややこしいのでコチラで別途紹介

ではこのページのHTMLのソースを見てみましょう。下記のようなHTMLが表示されると思います。

かなり複雑で訳の分からん文字が並んでいますね…。これ見て「こんなの書くの無理!」と思われる方もいるかもしれませんが大丈夫です!

実はこのソースの大部分はWordPressが自動的に作ってくれていて、作成者の私はほとんど何もしていません。書く必要があるのは本文部分くらいです。ですのでHTMLの知識はほぼ必要なく、基本的な構造や書き方を理解しておけば十分です。WordPressから生成されたページのソースを見てみるとこれが実感できると思います。

次は実際にWordPressからページを投稿し、どのようなHTMLが作られるかを見てみましょう!

WordPressからHTMLを生成してみよう

実際にWordPressで投稿した記事のHTMLを見てみましょう。

まずは下記のような投稿で記事を作成してみます。

この投稿を公開してから、公開したページのソースを表示してみましょう。

テーマによって差異はありますが、投稿した記事は上のようにタイトルと文章だけなのに、すでに非常に複雑なHTMLが生成されています。つまり、WordPressのようなツールを使用すれば、非常に複雑なHTMLも一瞬で自動的に作成することが可能です。しかも知識もほとんど必要ありません。

実際にソースから投稿した文字列を検索してみると下のような部分を見つけることができると思います。投稿の内容がここに反映されているのが分かりますね。

次に下記のような投稿をしてみます。今度は投稿画面で文字を太字や斜体にしたり、画像を載せたりしています。

同様に公開し、ソースを表示してみましょう。

↑ここが投稿の内容が反映された部分になります。さっきより少し複雑になっていますね。しかし投稿する際に必要なのは太字や斜体にするためにWordPressの画面から「B」や「I」のボタンを選択したり、「メディアを追加」から画像を追加するだけです。このことからもWordPressではHTMLの知識がなくても文章作成とボタン操作だけで、それを表示するためのHTMLを生成することができることが実感していただけると思います。

基本的なHTMLの構造

ここまで見てきたHTMLはかなり複雑なものだったと思います。次は簡単なHTMLを用いて構造の説明をします。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML</title>
	</head>
	<body>
		<font color=red>簡単なHTMLの例</font>
	</body>
</html>

<◯◯>と</◯◯>が対になっているものがたくさんあるのが分かると思います。これはHTMLにとって非常に重要な要素で、タグと呼ばれています。HTMLはこのタグの組み合わせにより形成されています。

タグは下記のように記載するのが一般的です。

<◯◯>で機能や属性を指定

<◯◯>と</◯◯>の間にコンテンツ(本文など)を記載

これにより、<◯◯>から</◯◯>までその機能・属性が適用されます。

例えば<p>で囲ったコンテンツは一つの段落として機能します。<h2>として囲ったコンテンツは見出しとして機能します。

HTMLを書いてみよう

実際にHTMLを書いてどういうページが作られるかを見てみましょう。

上のセクションに載せたHTMLを全文テキストエディタにコピペしてみましょう。四角で囲っている部分全部コピペするので良いです。

次はそれを保存します。名前はなんでも良いですが、拡張子は.htmlにしてください。

続いてそれをダブルクリックして開きましょう。恐らくウェブブラウザが起動して下のような画面が表示されるはずです。

次は実際にHTMLを編集してみましょう!

<font color=red>簡単なHTMLの例</font>

の部分を

<font color=blue>簡単なHTMLの例</font>

に変更して再度ファイル保存しブラウザで開いてみましょう。先程とちょっと違うページになりましたね。

<font>タグはフォントの属性を指定するタグです。上の例ではカラー属性を赤から青に変更したので文字の色が変化したというわけです。

HTML作成は基本的にこのタグと本文や画像のコンテンツの追加作業です。いろいろな機能を用いるためにはその分のタグの種類を知っておく必要があります。

このページでは基本的なタグのみをいくつか紹介しておきます。

スポンサーリンク

基本的なタグの紹介

ここでは基本的なタグについて紹介していきます。

・作成中

ホームページ作成トップに戻る

コメントを残す

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