インターネットのページは何からできている？～HTMLの基本
今日は、インターネットのページが何からできているかについてお話したいと思います。
あなたは今、インターネット上にある私のページを見ています。このページは全体がブルーの基調で構成され、記事やリンクは特定の位置にあります。そして写真も貼ってありますね。このサイトはGoogleのBloggerを使っていますので、Bloggerのツールを使って作成しています。
世の中には沢山のホームページ作成ツールというものが存在しますが、これらのツールを使って作成されるページの実態が、HTMLです。このHTMLは、ページに表示する文字や文字の大きさや色、写真をページのどこに配置するかといった目に見える部分の定義と、ページそのものの情報（メータデータともいいます）について記述してあります。
あなたはインターネットを見る時にブラウザーを使いますね。ブラウザーは、このHTMLを解釈して、HTMLで指定されている所定の位置に所定の大きさや色などでページを表示します。HTMLは、HyperText Markup Languageの頭文字を取ったものでホームページを記述するためのコンピューター言語であると覚えてください。そして、そのHTMLを解釈して表示したり、クリックされたリンク先に飛んでいったりしてくれるのがブラウザーの仕事です。
コンピューター言語って言うと何だか難しそうだと思うかもしれません。でも、ホームページ作成ツールをつかってホームページを作成するだけならば、HTMLを意識することはありません。でも、SEO対策を行う人は少しだけ意識しなければなりません。なぜならば。検索エンジンの基本的な動作は、このHTMLを機械的にフィルタリングすることでキーワードをページから取得しているからです。
HTMLの基本要素、タグ
HTMLの要素の区切りをタグと言います。要素とは「表示する文字列」であったり、「表示するイメージ（写真など）」であったり、「リンクに飛んでいくボタン」であったりします。
HTMLではこのタグで要素を、構造化して記述することでホームページを表現していきます。タグの基本的な書き方は以下になります。
＜ホニャララ＞ 内容 ＜／ホニャララ＞
ホニャララの所が何のタグかを示し、１つのタグは＜ホニャララ＞で始まりと＜／ホニャララ＞で終わる、この囲まれた部分が１つのタグです。タグは入れ子構造などを取ることができます。（ちなみに”＜”とか”＞”とか”／”とかは半角文字です。）
タグには、多くの種類があり、今回の記事で全てを伝えることはできません。今回は、ページを構成する基本的なタグを解説します。
HTMLによるページ記述の基本構造：
それでは、各タグについて説明します。
<!DOCTYPE html>
HTML5、というHTMLの現在のバージョンを表しています。
<html> ～ </html>
HTML文書であることを示しています。
始まりの「lang="ja"」は、日本語であることを示しています。
この文書全体なので、最後にこのタグの終了が来ます。
<head> ～ </head>
文書のヘッダ部分を示します。
このヘッダに、メタタグとタイトルタグが入ります。
<meta charset="UTF-8" name="Lightning Brains" content="船橋, 頭脳, パソコン, IT" >
実際に表示はされませんが検索ロボットや、ブラウザが参照します。
検索ロボットに拾ってもらいたいキーワードを設定します。
<title>Lightning Brains</title>
文書のタイトルで、ブラウザのメニューバーやタブに表示されます。
タイトルも検索ロボットがキーワードとして参照します。
<body> ～ </body>
ページ本文です。
今回は簡単に、”Hello world”と”こんにちは”だけです。
間に <br/> とありますがこれは改行を示しています。
ちなみに、HTMLを直接編集するにはテキストエディタを使用します。
また、参照しているページのHTMLを見てみたい時は、ブラウザの「ソースを表示」と言うような機能がありますので、それを使うとHTMLを直接参照できます。
SEO対策として、必要なHTMLの知識としては、まずは<meta>タグと<title>タグです。
でも、<meta>タグの中にあまり多くのキーワードを詰め込むとスパムページとみなされるので注意してください。
あなたは今、インターネット上にある私のページを見ています。このページは全体がブルーの基調で構成され、記事やリンクは特定の位置にあります。そして写真も貼ってありますね。このサイトはGoogleのBloggerを使っていますので、Bloggerのツールを使って作成しています。
世の中には沢山のホームページ作成ツールというものが存在しますが、これらのツールを使って作成されるページの実態が、HTMLです。このHTMLは、ページに表示する文字や文字の大きさや色、写真をページのどこに配置するかといった目に見える部分の定義と、ページそのものの情報（メータデータともいいます）について記述してあります。
あなたはインターネットを見る時にブラウザーを使いますね。ブラウザーは、このHTMLを解釈して、HTMLで指定されている所定の位置に所定の大きさや色などでページを表示します。HTMLは、HyperText Markup Languageの頭文字を取ったものでホームページを記述するためのコンピューター言語であると覚えてください。そして、そのHTMLを解釈して表示したり、クリックされたリンク先に飛んでいったりしてくれるのがブラウザーの仕事です。
コンピューター言語って言うと何だか難しそうだと思うかもしれません。でも、ホームページ作成ツールをつかってホームページを作成するだけならば、HTMLを意識することはありません。でも、SEO対策を行う人は少しだけ意識しなければなりません。なぜならば。検索エンジンの基本的な動作は、このHTMLを機械的にフィルタリングすることでキーワードをページから取得しているからです。
HTMLの基本要素、タグ
HTMLの要素の区切りをタグと言います。要素とは「表示する文字列」であったり、「表示するイメージ（写真など）」であったり、「リンクに飛んでいくボタン」であったりします。
HTMLではこのタグで要素を、構造化して記述することでホームページを表現していきます。タグの基本的な書き方は以下になります。
＜ホニャララ＞ 内容 ＜／ホニャララ＞
ホニャララの所が何のタグかを示し、１つのタグは＜ホニャララ＞で始まりと＜／ホニャララ＞で終わる、この囲まれた部分が１つのタグです。タグは入れ子構造などを取ることができます。（ちなみに”＜”とか”＞”とか”／”とかは半角文字です。）
タグには、多くの種類があり、今回の記事で全てを伝えることはできません。今回は、ページを構成する基本的なタグを解説します。
HTMLによるページ記述の基本構造：
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" name="Lightning Brains" content="船橋, 頭脳, パソコン, IT" > <title>Lightning Brains</title> </head> <body> Hello World <br/> こんにちは </body> </html>
それでは、各タグについて説明します。
<!DOCTYPE html>
HTML5、というHTMLの現在のバージョンを表しています。
<html> ～ </html>
HTML文書であることを示しています。
始まりの「lang="ja"」は、日本語であることを示しています。
この文書全体なので、最後にこのタグの終了が来ます。
<head> ～ </head>
文書のヘッダ部分を示します。
このヘッダに、メタタグとタイトルタグが入ります。
<meta charset="UTF-8" name="Lightning Brains" content="船橋, 頭脳, パソコン, IT" >
実際に表示はされませんが検索ロボットや、ブラウザが参照します。
検索ロボットに拾ってもらいたいキーワードを設定します。
<title>Lightning Brains</title>
文書のタイトルで、ブラウザのメニューバーやタブに表示されます。
タイトルも検索ロボットがキーワードとして参照します。
<body> ～ </body>
ページ本文です。
今回は簡単に、”Hello world”と”こんにちは”だけです。
間に <br/> とありますがこれは改行を示しています。
ちなみに、HTMLを直接編集するにはテキストエディタを使用します。
また、参照しているページのHTMLを見てみたい時は、ブラウザの「ソースを表示」と言うような機能がありますので、それを使うとHTMLを直接参照できます。
SEO対策として、必要なHTMLの知識としては、まずは<meta>タグと<title>タグです。
でも、<meta>タグの中にあまり多くのキーワードを詰め込むとスパムページとみなされるので注意してください。
コメント
コメントを投稿