Category
INDEX
Web開発の基礎、HTMLの概要
Web開発の基礎、HTMLの概要。SEOも少し解説。
#Web
投稿日:2024-07-04
更新日:2026-03-26
参考URL
Webサイトをゼロベースで設計する際に、避けては通れないHTMLについて解説します。
Web開発では多様な言語を習得することが求められます。
Webは日進月歩が激しいので使う言語や環境が目まぐるしく変わりますが、大まかにはざっと以下のような役割があります。
: Webブラウザ表示の基本部分。どの情報をどの順番で表示するかなどを決める。
: HTMLやJSPと組み合わせ、ブラウザ上に表示される要素のレイアウトを細かく調整する。
: ブラウザ上に表示される要素に対し、アニメーション処理など動的な変更を加える。
: ブラウザ上のユーザーの操作に応じて適切に情報の改変や更新を行い、再度ブラウザに反映させる。
: JavaやPHPなどと組み合わせ、そのサイトに必要なデータの追加/更新/削除などを専門に行う。
サイトが小規模である場合にはJavaScriptやデータベースが無かったりします。
とりあえずHPをゼロベースで開発する際に、必須になるのはHTMLで、次点でCSSになります。
HPを公開するにはレンタルサーバーやVPSサーバーを借りて、そこにHTMLをアップする必要があります。
しかし単純なHTMLの挙動を知りたいだけなら、ローカル上でもテストできます。
例えば適当なディレクトリにテキストを新規作成し、ファイル名をindex.htmlとします。
このファイルを適当なテキストエディターで開き、「HTMLテストですよ」という文言を書き込み、保存して閉じます。
出来上がったindex.htmlをダブルクリックするとブラウザ上で「HTMLテストですよ」という文言が表示されるはずです。
HTMLは「タグ」を使用することで、その要素の構造や意味を変化させることができます。
最も単純なものでは、例えば<h1>~<h6>というタグがあります。
これはその記事の中の見出しに対して付けるもので、文字が太文字に変形します。
またフォントサイズは<h1>が一番大きく、<h6>が一番小さくなります。
<h>タグは、単に見た目だけに影響があるのでなく、Googleからもその記事の中で特にその文言が重要だと判断されます。
<h1>は最も重要と判断される見出しで、実際に1ページにつき1か所だけに付けるのが正しいと言われています。
どうでもいい箇所に<h>タグを付けたり、文章の中に大量に<h>タグを付けすぎるとGoogleからの評価が悪くなり、検索順位が下がる可能性があります。
リンクを飛ばしたい時は、<a href>というタグを使います。
ファイルをダブルクリックで開き、「YahooのTOPへ」という文言をクリックすると、指定したサイトに飛ぶはずです。
<img src>というタグを使うことで、画像を表示できます。
例えばネットから適当なずんだもん画像を落として、index.htmlと同じ階層に置いたとします。
その上で下のようなコードをindex.htmlに打ったとする。
ダブルクリックでファイルを開くと指定した画像がブラウザ上に表示されます。
画像は何も絶対に同じ階層である必要はないです。
階層が違う場合は、コードでそれを指定してあげれば問題ないです。
例えばzunda.pngをpictureというフォルダに移した場合は次の通り。
<video controls>というタグを使うことで、動画を表示できます。
例えば適当な動画、ここでは当サイトの目次操作の動画をindex.htmlと同じ階層に置いたとします。
index.htmlを開き、次のように入力します。
結果は次の通り。
動画も画像と同様に、階層が違うならコードでそれを指定してあげれば問題ありません。
HTMLのタグはその他にもここでは紹介しきれないほど大量にあります。
重要なのは一段落を表す<p>や改行を表す<br>などです。
CSSと連携する際に必須な<div>タグ、あとは自分は余り使いませんが、表を作るのに便利な<table>タグなどもあります。
実際にサーバにアップロードする前には、記事の見た目には関係ない、もう少し複雑なタグ群を書き込む必要があります。
まず最初に<!DOCTYPE html>という記述が必要になります。
参考書などには「おまじない」と表現されることが多いです。理屈は抜きでとにかく書けと言われます。
HTMLのコーディングルールは、最初から決まり切っていたわけなく、十数年かけて何度かアップデートされてきました。
2010年辺りからは7つ目のバージョンであるHTML5が主流になり、今後はもうアップデートが無いと言われています。
この<!DOCTYPE html>というコードは、HTML5のルールに則って書きますという宣言を表します。
また<!DOCTYPE html>以下の全て要素は、<html>タグで囲む必要があります。
これも問答無用で書く必要があるおまじないのような物で、そこに囲んだ物がHTML文書であることを表します。
HTMLでは、その記事の大枠の仕様と実際の記事コンテンツを分けて記述する必要があります。
仕様部分は<head>タグで囲み、記事コンテンツは<body>タグで囲みます。
ブラウザ上に表示される「HTMLですよ」の部分は記事コンテンツに当たるので、<body>で囲んでいきます。
headタグ内の仕様部分は、主にはmetaタグ、titleタグ、linkタグ、scriptタグなどで必要なものを記述していきます。
linkタグ、scriptタグは必須ではないので、metaタグとtitleタグのサンプルをコードに追加してみます。
上記が最終的に出来上がったコード。
HPとしてはこれで最小限の構成を満たしているので、サーバに上げることが出来ます。
以下1行ずつmetaとtitleを解説します。
この部分は、この記事で扱う文字エンコーディングを表しています。
UTF-8は全世界の文字を表示できるように最適化された文字エンコーディングで、とりあえずこれを選んでおけばいいです。
他のエンコーディングを使うと文字化けが発生する可能性があります。
ここで指定した文字列が、検索サイトで検索した際のタイトルになります。
ユーザーのサイト訪問数に最も大きく関わってくる部分で、検索されやすい単語を、詰め込め過ぎずに埋め込む必要があります。
昔はPC上での見た目にさえ気を使っていれば問題ありませんでした。
しかし現在はスマホ、タブレット、PCと極端にアスペクト比が違う端末の全てに対応する必要があります。
上のコードはこうした端末間の見え方のギャップを修正するためにGoogleが推奨してる設定です。
実際はこの後さらにCSS側でレスポンシブデザインを追求していく必要があります。この部分はまた次回解説します。
そのページがどのような属性を持ってるか指定するコードです。
20年くらいは前にここに何百文字ものkeywordsを指定して、不正に検索順位を上げる方法が横行していました。
現在はkeywordsが検索順位に影響を与える事はほぼ無いと言われていて、省略しても実際は問題ないと思われる。
Web開発の言語について
Webは日進月歩が激しいので使う言語や環境が目まぐるしく変わりますが、大まかにはざっと以下のような役割があります。
HTMLやJSP
CSS
JavaScript
JavaやPHP
データベース
とりあえずHPをゼロベースで開発する際に、必須になるのはHTMLで、次点でCSSになります。
HTMLの基本
ブラウザに文言を表示
しかし単純なHTMLの挙動を知りたいだけなら、ローカル上でもテストできます。
HTMLテストですよ
タグで文字の大きさを変える
これはその記事の中の見出しに対して付けるもので、文字が太文字に変形します。
またフォントサイズは<h1>が一番大きく、<h6>が一番小さくなります。
<h1>HTMLテストですよ</h1>
<h2>HTMLテストですよ</h2>
<h3>HTMLテストですよ</h3>
<h4>HTMLテストですよ</h4>
<h5>HTMLテストですよ</h5>
<h2>HTMLテストですよ</h2>
<h3>HTMLテストですよ</h3>
<h4>HTMLテストですよ</h4>
<h5>HTMLテストですよ</h5>
<h1>は最も重要と判断される見出しで、実際に1ページにつき1か所だけに付けるのが正しいと言われています。
どうでもいい箇所に<h>タグを付けたり、文章の中に大量に<h>タグを付けすぎるとGoogleからの評価が悪くなり、検索順位が下がる可能性があります。
タグでリンクを作成
<a href="https://www.yahoo.co.jp/">YahooのTOPへ</a>
タグで画像を表示
例えばネットから適当なずんだもん画像を落として、index.htmlと同じ階層に置いたとします。
<img src="zunda.png">
階層が違う場合は、コードでそれを指定してあげれば問題ないです。
例えばzunda.pngをpictureというフォルダに移した場合は次の通り。
<img src="picture/zunda.png">
タグで動画を表示
例えば適当な動画、ここでは当サイトの目次操作の動画をindex.htmlと同じ階層に置いたとします。
<video controls src="mokuji.mp4"></video>
その他のタグについて
重要なのは一段落を表す<p>や改行を表す<br>などです。
記事コンテンツ外のタグ
DOCTYPEとhtmlタグについて
参考書などには「おまじない」と表現されることが多いです。理屈は抜きでとにかく書けと言われます。
<!DOCTYPE html>
HTMLテストですよ。
HTMLテストですよ。
2010年辺りからは7つ目のバージョンであるHTML5が主流になり、今後はもうアップデートが無いと言われています。
この<!DOCTYPE html>というコードは、HTML5のルールに則って書きますという宣言を表します。
これも問答無用で書く必要があるおまじないのような物で、そこに囲んだ物がHTML文書であることを表します。
<!DOCTYPE html>
<html>
HTMLテストですよ。
</html>
<html>
HTMLテストですよ。
</html>
headタグとbodyタグについて
仕様部分は<head>タグで囲み、記事コンテンツは<body>タグで囲みます。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
HTMLテストですよ。
</body>
</html>
<html>
<head>
</head>
<body>
HTMLテストですよ。
</body>
</html>
metaタグとtitleタグについて
linkタグ、scriptタグは必須ではないので、metaタグとtitleタグのサンプルをコードに追加してみます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>この記事のタイトルですよ。</title>
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
<meta name="keywords" content="エンジニア,IT,Programing">
</head>
<body>
HTMLテストですよ。
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>この記事のタイトルですよ。</title>
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
<meta name="keywords" content="エンジニア,IT,Programing">
</head>
<body>
HTMLテストですよ。
</body>
</html>
HPとしてはこれで最小限の構成を満たしているので、サーバに上げることが出来ます。
以下1行ずつmetaとtitleを解説します。
<meta charset="UTF-8">
UTF-8は全世界の文字を表示できるように最適化された文字エンコーディングで、とりあえずこれを選んでおけばいいです。
他のエンコーディングを使うと文字化けが発生する可能性があります。
<title>この記事のタイトルですよ。</title>
ユーザーのサイト訪問数に最も大きく関わってくる部分で、検索されやすい単語を、詰め込め過ぎずに埋め込む必要があります。
<meta name="viewport" content="width=device-width, initial-scale=1″>
しかし現在はスマホ、タブレット、PCと極端にアスペクト比が違う端末の全てに対応する必要があります。
上のコードはこうした端末間の見え方のギャップを修正するためにGoogleが推奨してる設定です。
実際はこの後さらにCSS側でレスポンシブデザインを追求していく必要があります。この部分はまた次回解説します。
<meta name="keywords" content="エンジニア,IT,Programing">
20年くらいは前にここに何百文字ものkeywordsを指定して、不正に検索順位を上げる方法が横行していました。
現在はkeywordsが検索順位に影響を与える事はほぼ無いと言われていて、省略しても実際は問題ないと思われる。
