WEBページを作るための基本HTMLの基本構造や書き方について

HTMLとは?

HTMLとは「Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)」の略で、WEBページを構成するための土台となるマークアップ言語です。WEBデザインを作るにはこの言語を理解しなければいけません。

HTMLは「<」と「>」で囲った特殊な文字(これらをタグと言います)でコンピューターにどのように表示させるかを指示しています。

例えば、文章の見出しや別のページを表示させるためのリンクの設定など、これらをタグで一つずつ表示していきます。インターネット上にある多くのサイトはこのHTMLを使用して作成しています。

HTMLファイルの作りかた

HTMLのファイルを作成するにはいくつかのルールや決まり事があります。まずはHTMLファイルの骨組みについてメモを残しておきます。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>奮闘記┃アラフォー未経験のおっさんがWEBサイト作成やプログラムに挑戦</title>
    <mata name="description" content="アラフォー未経験のおっさんがWEBサイトの作成やプログラミングに挑戦します。その時に得た情報や必要なことを書き記す備忘録でもあります。">
  </head>

  <body>
    <h1>まずは自己紹介</h1>
    <p>今年38歳になるアラフォーのおっさんです。</p>
  <body>
</html>

HTMLの基本構造は上記の通りです。本来はCSSの記載もいたしますが、CSSについては後ほど触れていきますので今回は記載していません。

では各項目について説明していきます。

HTMLファイルの骨組みの説明

<!doctype html>の役割

一番最初に記載する<!doctype html>。読み方は「ドクタイプ エイチティーエムエル」です。これは簡単に説明すると、今から「HTMLを記載する」また「どのバージョンのHTMLの文書を記載するか」をコンピューター(ブラウザ)に宣言しています。doctype宣言と言われ、上記内容を伝える役割を持っています。

HTMLのバージョンにより記載方法は異なりますが、現在主流のHTML5ではこの1行だけ記載すれば問題ありません。

備考

当備忘録は2020年4月現在の最新バージョン(マイナーアップデートのHTML5.2含む)についての説明になります。

<html>~</html>の役割

doctype宣言の直下に記載します。ここに内容を記載することでコンピューター(ブラウザ)にこれはHTMLの文書であることを伝える役割をもっています。また「lang=”●●”」を指定することで言語の設定が可能であります。「ja」は日本語、「en」は英語を指定しています。

備考

当備忘録ではlang属性を記載していますが、Googleはサイトに記載されているテキストからどこの国の言語かを判断できるため本来は指定する必要はありません。

<head>~<head>の役割

読み方は「ヘッド」です。この中に記載する内容はブラウザには表示されません。では何を記載するかと言うと、後ほど触れていく「CSS」などの外部ファイルのリンクやページタイトル・説明文等の情報を記載します。

<meta-charset=”UTF-8″>の役割

細かな設定は省きますが、ここを設定(文字コードの設定)しないとWEBページでテキストが正しく表示されず文字化けをおこしてしまう可能性があります。

日本では「UTF-8」の他「Shift_JIS」や「EUC-JP」がよく使われているそうですが、HTMLを作成する場合は「UTF-8」が推奨されています。

ちなみには<meta>はメタと読みます。

<title>~</title>の役割

作成するWEBサイトのタイトルを記述することで、ブラウザーのタブやインターネットで検索された時にページのタイトルとして表示されます。

ブラウザーのタブには下記のように表示されます。タイトルが長い場合は途中までしから表示されません。

<meta name=”description” content=”●●”>の役割

作成するWEBサイトの簡単な説明を記載します。インターネットで検索した時にタイトルの下に表示される説明文はこの部分が反映されています。

descriptionは「ディスクリプション」、contentは「コンテント」と読みます。

この説明文ですが、PCとスマホでは表示される文字数が異なります。一つの目安としてはPCが120文字程度、スマホでは50文字程度が表示されるケースが多いです。

ただし頻繁に増減されているみたいですのであくまでも目安して考える必要があります。

<body>~</body>の役割について

この中に記載する文書が実際にブラウザに表示されます。読み方は「ボディ」です。

Point

<head>~</head>にはページの情報を記載、<body>~</body>には実際にWEBサイトに表示させたい内容を記述していくことになります。

コメント

タイトルとURLをコピーしました