スキル

HTMLとは?初心者でも分かるようにHTMLの基本を解説!

HTMLって何?というHTML初心者に向けて、難しい言葉を出来るだけ避けてご説明します。いつかプログラミングをしてみたい、ウェブデザインにも興味がある、でも何も分からない、そんな方が理解を深めて頂けるような内容となっていますので最後まで御覧下さい。

HTMLとはウェブページを作る為の言語

HTMLとは、一言でいうとサイトを構築する為の言語です。パソコンやスマホで見ているサイトはHTMLによって構成されています。

ウェブページを作る為に開発された言語なので、ホームページやブログを自分でいじりたいという方は身につけておくと便利な言語です。

HTMLとはハイパーテキスト・マークアップ・ランゲージの略

HTMLとはHyper Text Markup Languageの略です。ハイパーテキスト・マークアップ・ランゲージと読みます。

ハイパーテキストとは、ウェブページのリンク等の事です。ハイパーテキストはクリックするとページが開ける等の役割を持っています。通常の文字との違いはそこです。

マークアップというのは印を付けるという意味で、文字に役割を持たせる事で画像を表示したり表等、必要なものを表示させる事ができるようになります。ハイパーテキストを使ってマークアップして様々な表現が出来るようになる言語です。

初心者には分かりにくい単語がたくさん出てきましたが、分からない場合は最後まで読み進めて何度も読み返して下さい。

HTMLはウェブの基本となる言語

HTMLをどのような場所で使うかというと、ウェブ上のサイトを作る時に使います。目に見える部分は文字や画像で見やすくなっていますが、HTMLでサイトの構成を細かく指定してあります。

なかなかイメージがわかない方は、ページのソースを見てみて下さい。見ているウェブページを右クリックしてページのソースを表示という所をクリックすると見れます

クリックすると、このような画面が出てきます。

これがHTMLです。HTMLを理解していなければ、何が書かれているか分かりませんが、ここに書かれている事が読み込まれてウェブページが表示されます。初心者を脱却すれば、ざっくり見て大体どんな事が書いているか分かるようになります。

HTMLはサイトの骨格的位置づけ

HTMLは、一言でいうとサイトの骨格的な位置づけです。つまり、HTMLだけでサイトが構成されているわけではないという事です。

サイトの基盤としてHTMLがあり、見える部分を整えるのがCSSです。サイトをスムーズに動かす為にJavaScriptがあります。あなたがどんなサイトを作りたいかによって、必要なプログラミング言語は変わってきますが、基盤にHTMLがある事に変わりはありません。

HTMLはコンピュータが理解する為に使う

そもそも、どうしてHTMLを使わなければならないのでしょうか。その答えは、コンピュータが理解出来るようにする為です。

人間と人間でコミュニケーションを取る場合、その国の言葉や方言を使います。同様に、ウェブページに何を表示させたいかという事をコンピュータに伝えなければなりません。その伝える方法としてHTMLを使います。

HTMLを記述するにはテキストエディタとウェブブラウザが必要

HTMLを記述するには、テキストエディタとウェブブラウザが必要です。HTML初心者さんにわかりやすいように、どのように使うのかそれぞれ説明します。

テキストエディタにプログラミング言語を記述する

HTMLやCSSはテキストエディタに記述します。テキストエディタを使うメリットは、自動補完コードが色分けされる等、プログラミング言語を記述する際に便利な機能が備わっている事です。

Windows、Mac、Linux、どのOSを使うかによって、使えるテキストエディタが違います。Sublime TextAtomが有名なので、迷ったらこのどちらかを使ってみましょう。

参考:Sublime Text

参考:Atom

ウェブブラウザはインターネットを見る為のソフト

Google ChromeやInternet Explorerのように、インターネットを閲覧する時に使うソフトがウェブブラウザです。ウェブブラウザを使う事でHTMLを読み込む事が出来ます。各ブラウザでウェブページの表示が違う事があるので、ホームページを作成する際に、プロは何度も確認しながら制作します。

HTMLってどうやって書いたらいいの?

HTMLの書き方を初心者さんでも分かりやすいようにご説明します。パターンが分かってくると難しくありません。

基本のHTMLの文法

HTMLの基本の文法は、タグで画像や文章を挟む事です。

<タグ名>と</タグ名>というのがある場合、前にあるタグが開始タグ、後ろにあるのが終了タグと呼ばれます。これらはセットで使われます。

開始タグから終了タグまでの一連のひとまとまりを、要素と呼びます。

どのタグに挟まれているかによって、ウェブサイトで表示した時の内容が変わります。

具体例でいうと、<p>と</p>で挟んだものは段落です。<h1>と</h1>で挟むと大見出しとなります。このように、何で挟むかで意味合いが違ってきます。

こちらの画像でいうと、h1の所が「ゼロからウェブデザインを~」で大見出し、「まずは~」の所がpタグではさまれ部分で段落です。このようにHTMLでは、タグで挟んで表現して見やすいウェブサイトにしています。

入れ子構造とは

タグの中にタグがある構造の事を入れ子構造といいます。入れ子構造は、タグの種類によっては書いては駄目なものもあるので注意しましょう。

開始タグの中に入れる情報は「属性」

開始タグの中に情報を入れる場合があります。その情報の事を属性といいます。

<a></a>というタグはリンクを意味するタグです。href=″リンク先のURL″という表記を開始タグの中に書く事でリンク先のURLを記述します。

属性の書き方の注意点として、タグ名の後に半角を空けて書くという事を忘れないようにして下さい。aタグで挟むのはリンク先へ飛ぶボタンです。

使用頻度の高いタグ

HTMLのタグの種類は膨大にあります。よく使うタグの使い方から覚えていきましょう。作業をし続けるうちに徐々に覚えていけます。よく使うタグについてご説明します。

画像を埋め込む際に使うimgタグ

imgタグは画像をウェブページに埋め込む時に使います。

imgタグは終了タグが必要ない事に気をつけて下さい。alt=″~″の部分に説明文を書かないといけない事も忘れないようにしましょう。通常時、この説明文は閲覧者には見えませんが、エラー等で画像がウェブページに表示出来ない時等に表示されます。

箇条書きを書く際に使うul/ol/liタグ

ul/ol/liタグは、箇条書きで表示したい時に使うタグです。<ul>の中に<li>で表現、または<ol>の中に<li>で表現します。

この2つで大きく違うのはウェブブラウザで見た際にどう見えるかという事です。ulタグを使うと番号がない箇条書きのリストになります。

olタグを使うと、番号付きの箇条書きのリストとして表示されます。いちいち番号を入力しなくて済むので便利です。

改行をする時に使うbrタグ

改行をしたいときにはbrタグを使います。

imgタグと同様に、brタグも終了タグが必要ありません。最初は紛らわしいですが、頻繁に使うのですぐに慣れます。

表を作りたい時はtableタグで作る

ウェブページ内で表を使いたい時には、画像編集ソフトで作ってそれを画像としてアップロードする方法の他に、直接ウェブページ内で表を作る方法があります。直接作る際に使うのがtableタグです。

tableタグを使う際に、trタグ、tdタグ、thタグを一緒に使うのですが、この違いを正しく理解しておかないと頭がこんがらがってしまいます。

落ち着いて覚えていけば大丈夫です。難しく考えず、練習を重ねて上達しましょう。

thタグは、表の見出しに使います。図中1番の文章は、thタグで書かれています。thタグで書くと太字になって文字は中央寄せになります。必要がなければthタグは無理に使う必要はありません。tdタグは表の中身を作る時に使います。

外枠の線の幅を指定するbоrder=“1”という属性は、1で設定されていますが、0から7の間で指定出来ます。数字が小さくなるほど外枠の線が細くなります。ちなみに、0にすると外枠の線は見えなくなってしまいます。

HTMLのエラーはどう対応すればいい?

プログラミングをやっていると予期せぬエラーがよく起こります。そんな時、HTML初心者さんは焦ってしまいがちです。どのように対応すればいいかご説明します。

エラーチェックサイトやツールを利用して記述エラーを発見する

HTMLの記述にエラーがあるかどうかは、エラーチェックをする事が出来るサイトやツールがあります。例えば、The W3C Markup Validation Serviceは、正しいHTMLコードを使用出来ているか確認してくれるサイトです。

ページ単位でチェックしてくれて、比較的結果も早く分かるので便利に使えます。ちなみに、The W3C Markup Validation ServiceのW3Cとは、World Wide Web Consortiumの略です。チェックの結果、エラーがない場合はこのように表示されます。

エラーが有る場合はこのように表示されます。

上記のように、問題箇所も分かりやすく伝えてくれるので参考になります。

参考:The W3C Markup Validation Service

Another HTML-lint gatewayは日本語でエラーチェックが出来るサイトです。The W3C Markup Validation ServiceのW3Cと機能的には大きく違わないので、好みで使いましょう。エラーが有った場合は、下記のように表示してくれます。

参考:Another HTML-lint gateway

Google Chromeの拡張機能でエラーチェックをする

Google Chromeの拡張機能を使ってもエラーチェックが出来ます。拡張機能の名前はHTMLエラーチェッカーです。

HTMLエラーチェッカーを使うと、どこにエラーがあるのか分かりますし、Google Chromeの拡張機能という事でブラウザ上で気軽に使えるのが利点です。

参考:HTMLエラーチェッカー

まとめ

HTMLとは、普段インターネットを意識する事はなくても、ウェブサイトになくてはならない存在です。あなたがホームページやブログを使おうと思われているのであれば、少しずつでも学んでおくといいでしょう。

レンタルサーバーを借りてWordPress等を運用するようになれば、HTMLやCSSの知識があれば細かい所までいじれるようになります。HTML初心者を脱却すれば目を見張るようなサイトを制作する事も夢ではありません。今回紹介出来なかったタグもたくさんありますので、興味があれば調べてみて下さい。

無料講座|アクシグ式 最新情報
資金ゼロでネット物販を成功させる全手法


物販ビジネスで稼ぎたいけど、どうやって始めたらいいかわからない、売上が思うように伸びないなど悩んでいませんか?

本講座では世界最新の成功事例を実績をあげた成功者の経験をもとに、

  • 無在庫ネットショップ たった3ヶ月、1商品で 7214万9493円稼いだ方法
  • Amazonとネットショップで毎日39万円稼ぐ方法
  • 毎週19万3588円をInstagramから無料で集客して販売する方法
  • 無料でInstagramのインフルエンサーに商品を宣伝してもらう方法
  • 無在庫ストアで月商1億を超えた方法
  • 店舗せどりで1日1万円稼ぐ方法
  • アマゾンの在庫1パレットを僅か1000円で入手する方法
  • 無在庫ネットショップで儲かる商品を見つける海外の最新リサーチ法
など専門家が独自に入手した、日本ではまだ知られていない秘密の情報をお届けします。

あなたのビジネスを成功させるために、今すぐ限定情報を入手してください。