IT・WEB・PC事業を行う9BOX IT・WEB・PC事業を行う9BOX

HTMLとは?HTMLの書き方とタグの使い方

HTMLとは?HTMLの書き方とタグの使い方

ホームページでよく聞くHTMLとは?

HTMLファイルの作り方から表示方法、タグの使い方を説明します。

HTMLとは?

HTML(エイチティエムエル)とはWebページを作ることができる言語です。

HyperTextMarkupLanguage(ハイパーテキスト・マークアップ・ランゲージ)の頭文字をとった略称がHTMLです。

ブラウザで見ているWebサイトはほとんどHTMLで作られています。

ほとんどということは他には何があるの?と思いますが動的なページを作るときはPHPといった言語を使います。

ただし、PHPを使うにしろHTMLを土台としてWebページを作る為、ホームページを作りたい方は覚えておかなければいけない言語です。

HTMLファイルの作り方

ここではHTMLファイルの作り方をご説明します。

その前に拡張子が表示される設定になっているか確認してください。

拡張子の表示がされているか確認

拡張子が表示される場合、下記の画像のように「○○.△△」と表示されます。

拡張子

拡張子が設定されていない方はスタートアップからコントロールパネルを開きフォルダオプションを開いてください。

フォルダオプション

フォルダオプションの表示タブを開き「登録されている拡張子は表示しない」のチェックを外して適用を押して完了です。

拡張子を表示する設定

テキストファイルを作成

拡張子が表示されていることを確認し、ドキュメントファイルに「tmp」とフォルダを作ってください。

できましたら新規作成からテキストファイルを選択し、テキストファイルを作成して下さい。名前は「index.txt」で大丈夫です。

テキストファイル作成

そして「index.txt」ファイルを開き下記のソースコードを入力し、保存して下さい。

  1. <html>
  2. <body>
  3. <p>表示確認</p>
  4. </body>
  5. </html>

HTMLファイルの作成

最後に「index.txt」の拡張子を「index.html」に変更します。

HTML拡張子

HTMLファイルの表示方法

HTMLファイルの表示方法は簡単で「index.html」をダブルクリックしてみて下さい。

ブラウザが開かれ先ほど入力した文章が表示されていると思います。

URLをみていただくと分かる通りローカルのみでしか表示されていません。

※これをインターネット上で公開したい場合サーバとドメインが必要となってきます。

次にHTMLで使うタグの説明をしていきます。

タグの使い方と説明

HTMLを書くうえで使うタグをご紹介したいと思います。

ほとんどのページが下記のタグで補えますので覚えて損はないです。

また暗記してほしいタグと暗記しなくてもよいタグがありますので1つ1つ補足していきます。

DOCTYPEタグ

DOCTYPEタグとはHTMLファイルの一番先頭に記載するドキュメントタイプを宣言するタグです。html5の書き方は下記の通りです。

  1. <!DOCTYPE html>
  • 暗記したほうがよい

htmlタグ

htmlタグとはHTML文章であることを宣言するタグで必ず必要です。またlang属性で言語を指定することができ「lang="ja"」と書くことで日本語で書きますよと機械に伝えることができます。

  1. <html lang="ja">
  2. </html>
  • 暗記したほうがよい

headタグ

headタグとはHTML文書のヘッダ情報を表します。次に説明するmetaタグで文字コードの宣言をしたりします。

  1. <head>
  2. </head>
  • 暗記したほうがよい

metaタグ

metaタグとはメタ情報を表します。これはHTML上級者でない限りコピペで大丈夫です。実際に使うmetaタグを記載します。

文字コード指定

文字コードの指定を行うメタタグです。SJISやUTF-8が日本では主流です。ここではUTF-8にして説明致しますが、CSSやデータベースも同じUTF-8で合わせないと文字化けが発生します。

  1. <meta http-equiv="content-Type" content="text/html; charset=UTF-8">

スタイルシート言語指定

CSSの指定を行うメタタグです。CSSを使う場合は記述することで機械に分かりやすく伝えることができます。

  1. <meta http-equiv="content-style-type" content="text/css">

スクリプト言語指定

javascriptの指定を行うメタタグです。

  1. <meta http-equiv="content-script-type" content="text/javascript">

viewport指定

viewportの指定を行うメタタグです。スマートフォンやタブレット端末によって見やすく表示を変える場合に使います。現在はレスポンシブデザインが主流ですので必須といっても過言ではありません。

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0">

keywords指定

keywordsの指定を行うメタタグです。Webページが何について書かれているかを記載します。

  1. <meta name="keywords" content="HTML,書き方,タグ,使い方">

description指定

descriptionの指定を行うメタタグです。検索エンジンで表示されるタイトルの下の説明部分です。

  1. <meta name="description" content="HTML(エイチティエムエル)とはWebページを作ることができる言語です。テキストファイルの拡張子を「html」に変えるとブラウザが開きローカル環境でも表示することができます。">
  • 暗記しなくてもよい

titleタグ

titleタグとは検索エンジンで表示されるタイトル部分になります。

  1. <title>HTMLとは?HTMLの書き方とタグの使い方 ホームページの作り方|9BOX</title>
  • 暗記したほうがよい

linkタグ

linkタグとは別のファイルを指定する時に使うタグです。

shortcut icon指定

パソコンだとタブの箇所、スマートフォンだとアプリのようなアイコンを表示させることができます。

  1. <link rel="shortcut icon" href="https://9box.jp/images/favicon.ico" type="image/x-icon">

canonical指定

canonical指定をすることにより、似たようなページがWebサイト内に合った場合検索エンジンに優先されるページとして伝えることができます。

  1. <link rel="canonical" href="https://9box.jp/web/homepage/create/static/">

css指定

外部のCSSファイルを呼び出すことができます。

  1. <link rel="stylesheet" type="text/css" href="test.css">

scriptタグ

外部のjavascriptファイルを呼び出すことができます。

  1. <script src="https://9box.jp/js/iScroll.js"></script>
  • 暗記しなくてもよい

bodyタグ

bodyタグとはHTML文書の本体を表しヘッダー部分や文章を書き始めますよと宣言するタグで必ず必要です。htmlタグの中に入れて下さい。

  1. <body>
  2. </body>
  • 暗記したほうがよい

hタグ

hタグとは見出しの意味を持つタグです。

h1タグはそのページで何を伝えたいかをまとめた1つのページに1つしか配置できないタグです。

h2タグはh1タグに対しての小見出しで、複数配置することができます。h3,h4・・・においても考え方は同じです。

  1. <h1>ブラウザ</h1>
  2.  <h2>chrome</h2>
  3.   <h3>google</h3>
  4.  <h2>Internet Explorer</h2>
  5.   <h3>マイクロソフト</h3>
  • 暗記したほうがよい

pタグ

pタグとは文章を書くうえで一番使うタグです。pタグで囲まれた文章は段落で区切ることができます。またbodyタグ内でのみ書きます。

  1. <p>1行目に表示される文章です</p>
  2. <p>2行目に表示される文章です</p>
  • 暗記したほうがよい

aタグ

aタグとはリンクを設置する時に使うタグです。商品の詳細を見たい時青い文字を押すと異なるページへ遷移する機能です。

  1. <a href="http://~">商品一覧はこちら</a>
  • 暗記したほうがよい

ulタグ

ulタグとはリストとして表示したい時に使うタグです。pタグでも見た目は同じように書けますが機械はタグを見て文章なんだなリストなんだなと判断する為きちんとタグを使い分けることが重要です。

  1. <ul>
  2.  <li>速い</li>
  3.  <li>使いやすい</li>
  4. </ul>
  • 暗記したほうがよい

olタグ

olタグとは順序が決まっているリストとして表示したい時に使うタグです。ulタグは順序に縛りがないタグですがolタグは順序があるよと機械に教えることができます。

  1. <ol>
  2.  <li>パソコンを起動する</li>
  3.  <li>パスワードを入れる</li>
  4.  <li>ブラウザを開く</li>
  5. </ol>
  • 暗記したほうがよい

dl・dt・ddタグ

dlタグとは定義リストとして表示したい時に使うタグです。デザインとしてtableタグがありますが機械が分かりやすいように書く場合dlタグの方が適しています。

dtタグとは定義リスト(dl)に対しての用語を表します。

ddタグとは用語(dt)に対しての説明を表します。

  1. <dl>
  2.  <dt>OS</dt>
  3.  <dd>Windows10</dd>
  4.  <dd>Windows8</dd>
  5.  <dd>Windows7</dd>
  6. </dl>
  • 暗記したほうがよい

タグをまとめて表示

下記のコードを「index.html」に貼り付けて保存し、ダブルクリックで開いてみて下さい。

HTMLの編集
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta http-equiv="content-Type" content="text/html; charset=UTF-8">
  5. <meta http-equiv="content-style-type" content="text/css">
  6. <meta http-equiv="content-script-type" content="text/javascript">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <meta name="keywords" content="HTML,書き方,タグ,使い方">
  9. <meta name="description" content="HTML(エイチティエムエル)とはWebページを作ることができる言語です。テキストファイルの拡張子を「html」に変えるとブラウザが開きローカル環境でも表示することができます。">
  10. <title>HTMLとは?HTMLの書き方とタグの使い方 ホームページの作り方|9BOX</title>
  11. <link rel="shortcut icon" href="https://9box.jp/images/favicon.ico" type="image/x-icon">
  12. <link rel="canonical" href="https://9box.jp/web/homepage/create/static/">
  13. <link rel="stylesheet" type="text/css" href="test.css">
  14. <script src="https://9box.jp/js/iScroll.js"></script>
  15. </head>
  16. <body>
  17. <h1>ブラウザ</h1>
  18.  <h2>chrome</h2>
  19.  <p>1行目に表示される文章です</p>
  20.  <p>2行目に表示される文章です</p>
  21.   <h3>google</h3>
  22.   <ul>
  23.    <li>速い</li>
  24.    <li>使いやすい</li>
  25.   </ul>
  26.  <h2>Internet Explorer</h2>
  27.  <p>1行目に表示される文章です</p>
  28.  <p>2行目に表示される文章です</p>
  29.   <h3>マイクロソフト</h3>
  30.   <ol>
  31.    <li>パソコンを起動する</li>
  32.    <li>パスワードを入れる</li>
  33.    <li>ブラウザを開く</li>
  34.   </ol>
  35.   <dl>
  36.    <dt>OS</dt>
  37.    <dd>Windows10</dd>
  38.    <dd>Windows8</dd>
  39.    <dd>Windows7</dd>
  40.   </dl>
  41.  </body>
  42. </html>

表示はされたけど見栄えが悪い。そこでCSSが必要となってきます。

CSSと組み合わせることによって期待通りのホームページができあがります。

HTMLの構造が集客に影響する

HTMLの構造や文法を正しく使うことで集客及び成果に繋がるホームページ作りを実装することができます。

XHTMLで定義しているにも関わらずHTMLの文法で書いてしまったり、リンクタグ(a)の入れ子が間違ったりすることでもデバイスの環境によっては意図しない表示になってしまいます。

HTML文章の文法をチェックするツールではホームページ制作で使うHTML言語が正しく使われているか採点することができます。

100点満点にする必要はありませんが、最低でも0点以上になるよう作っていないと、ユーザの環境で形が崩れていたり、検索エンジンがうまく読み取れない可能性があります。

  • 形崩れが起きる為信頼性が低下

ユーザだけでなく検索エンジンにも伝わる文法作り

Webサイトは何よりユーザ第一に考えないといけません。しかし、検索順位を評価するのはユーザ動向と検索エンジンのクローラーが巡回した評価です。

例えば画像にALT属性がついていないと音声として聞くユーザに対して伝わらないばかりでなく、万が一画像の表示ができない場合の説明文として表示されなくなってしまいます。

ユーザばかりでなく、検索エンジンにも何の画像か判断ができなくなります。

これらの文法を直すことで、ユーザに不安を感じさせない作りができ、検索エンジンにも伝わる文法作りをすることができます。

ホームページの作り方

お問合せ

お気軽にお問合せ下さい。

  • 電話番号 0285-35-4987
  • メール info@9box.jp