HTMLの勉強|Webサイト作りの基礎

初心者向けの向けのHTMLの勉強の仕方を綴っていきます。かくいう私もWebサイト作りの初心者です笑

headタグについて勉強しましょう。

前回、HTMLの大まかな概要について勉強しました。

今回は、HTMLの中の<head>タグについてより勉強をしていきましょう。

 

<!DOCTYPE html>

<html lang="ja">

<head>

  <meta charset="UTF-8">

  <title>HTMLの勉強</title>

</head>

 

以前作成した、このHTMLのヘッドの部分のみ抜き出して説明をしていきます。

<head>タグには、入力出来るタグがいくつかあります。

<!DOCTYPE html>

<html lang="ja">

<head>

  <meta charset="UTF-8">

  <meta name="description" content="HTMLの勉強を始めます。">

  こちらは、検索エンジンに対して、どんなサイトであるかの説明を記載する項目となっています。こちらにかかれた文章が、検索結果に反映されますので、自分が作ったサイトの内容を簡潔に書きましょう。

  <title>HTMLの勉強</title>

  <link rel="stylesheet" href="style.css">

デザインを指定するスタイルシート(css)を適用させるために必要なタグです。

スタイルシートについては別の機会に説明をします。

  <link rel="shortcut icon"  href="favicon.ico" >

こちらは、ファビコンを指定する際に必要なタグです。

ファビコンとは、下記のような物です。

ユーザーがお気に入りに入れた際に、タイトルと一緒に表示がされるので、ユーザーにとってどんなサイトかをイメージしやすくさせることが出来ます。

f:id:htmlnobennkyou:20130414162729j:plain

 

  <script src="myscript.jp"></script>

こちらは、jsファイルを読み込むためのタグになります。

スクリプトタグは閉じタグが必要となりますので、忘れず入力をしてください。

</head>

 

上記のタグを整理すると下記のようになります。

<!DOCTYPE html>

<html lang="ja">

<head>

  <meta charset="UTF-8">

  <meta name="description" content="HTMLの勉強を始めます。">

  <title>HTMLの勉強</title>

  <link rel="stylesheet" href="style.css">

  <link rel="shortcut icon"  href="favicon.ico" >

  <script src="myscript.jp"></script>

</head>

 

現時点では、cssファイルもファビコンデータも、jsファイルも作成していないため、何も変化はありませんが、こういうタグもhead内には入れられるということを理解しておいてください。