【初心者】HTMLを独学で学んだら”なるほど”が増えた話

Learn HTML by yourself

【初心者】HTMLを独学で学んだら”なるほど”が増えた話

HTML言語は、タグという記述ルールに沿ってなりたっています。初心者がWebサイト記事を書くときには、テーマに沿って機能がついていて、文字を入力すると記事構成は出来上がるのが、初心者でも始めることができる理由です。

クレカ
クレカ

今日は要素について勉強していくよ!

おさらい

私達がみているWebサイトは、きれいな外観や画像などで映し出されています。しかし、実際はテキストファイルによって作成されていてその時に使用される言語が【HTML】です。

head(ヘッド)要素の概要✍

head要素は、コンピュータが読み取るための情報が入る要素で、HTML言語の中の大きく分類された大切な要素の一つです。

<head>~</head>

Webサイトで表示されるとしたら、ブラウザのタブです。

 

 


head(ヘッド)要素の使い方

head(ヘッド)要素は、title(タイトル)やmeta(メタ)要素の情報データの集まりを意味しています。

<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>タイトル</title>
<meta name=”description” content=”概要”>
<meta name=”keywords” content=”キーワード”>
<link rel=”stylesheet” href=”/css/style.css”>
<script src=”/js/script.js”>
</head>

body要素の概要✍

HTML言語の中の大きく分類された大切なもう一つの要素で、body要素に入る情報は、私達がWebサイトを閲覧しているページの情報です。

<body>~</body>

私達がみている外観を映し出す記述(Webサイト)

 

 


body(ボディ)要素の使い方

body要素に入る情報は、私達がWebサイトを閲覧しているページの情報を意味しています。

<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>タイトル</title>
<meta name=”description” content=”概要”>
<meta name=”keywords” content=”キーワード”>
<link rel=”stylesheet” href=”/css/style.css”>
<script src=”/js/script.js”>
</head>
<body>
<header>ヘッダーの内容</header>
<main>ページの主な内容</main>
<nav>ページ内のナビゲーション</nav>
<fotter>フッターの内容</fotter>
</body>
</html>

meta(メタ)要素の概要

meta(メタ)要素は、HTMLで記述している文書の概要やキーワードのデータのことです。

<meta charset=”utf-8″>
<meta name=”description” content=”概要”>
<meta name=”keywords” content=”キーワード”>

meta(メタ)要素の使い方

要素に名前を付けることで、meta(メタ)データの種類を表し、内容をcontent(コンテンツ)属性で表します。
<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>タイトル</title>
<meta name=”description” content=”概要”>
<meta name=”keywords” content=”キーワード”>
<link rel=”stylesheet” href=”/css/style.css”>
<script src=”/js/script.js”>
</head>
例えば、<meta name=”description” content=”概要”>
name(ネーム)属性をつけて、Webサイト文書の概要を記述します。1つの文書に一つだけ記述することができます。検索エンジンに読み取られて、検索結果などに表示される情報となります。
逆に、Webサイト文書を検索エンジンから確認できない記述の仕方が、<meta name=”robots” content=”noindex,nofollow”>となります。

descriptionとは

descriptionは、説明を表します。

このWebサイトには、「~の内容が記載されていますよ。」という意味です。

<meta name=”description” content=”概要”>
<meta ✙ name ✙ description ✙ content>

文字コード

Webサイトで記述するテキストは、文字コード「文字符号化方式」が指定されています。文字コードは、コンピュータが読み取る文字の種類のようなもの。日本語の場合は、主に下記のような文字コードになります。

  • UTF-8(主)
  • Shift_JIS
  • EUC-JP

<meta charset=”utf-8″>

meta(メタ)要素で文字コードを【UTF-8】と指定した場合、ファイル保存する際も同じ文字コードで指定しないと文字化けしてしまいます。

スマートフォンに向けた表示方法

viewport(ビューポート)は、meta(メタ)要素内に記述します。スマートフォンやタブレットの端末でWebサイトが快適に閲覧できるための要素です。

<meta name=”viewport”>

head ✙ meta ✙ name ✙ viewport

<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
</head>

meta viewportと「width=device-width」・「initial-scale」について

meta viewportを記述する時に追加できる属性値が、「width=device-width」・「initial-scale」です。

width=device-width✍

width=device-widthは、Webサイトに表示させる領域の幅を意味します。

initial-scale✍

initial-scaleは、Webサイトに表示させるズーム倍率を意味します。

まとめ

HTMLで記述する要素には、head要素とbody要素の二つが大きく関わっています。

<開始>~</終了>までを1つの括りとして、さらにその中にタグのセットを追加していくという仕組みです。

まとめフローチャート

コメント

  1. 英雄故事 より:

    おはようございます
    ランキングから来ました
    奥が深いですね~

    • nekonone より:

      おはようございます。
      コメントありがとうございます。
      初心者、いちから勉強中です!