HTMLのhead要素を理解して記述できるようになろう

あなた

大体HTMLとCSSの関係やWEBサイトの仕組みがわかってきたのでこんどは具体的なコードの意味が知りたいです。

前回はHTML要素を指定してCSSでデザインする方法を学びました。

今回からはついにWEBページを作る流れに入っていきます。

上記のような「具体的なコードの意味を知りたい」という要望に答えていきます。

まず今回は「headタグ内のコードの意味」について解説していきますね。

※補足

この記事は連載の1つです。

以下の学習ステップを歩んできていることを想定しています。

: 【完全無料】HTMLとCSSの学習ステップ一覧
てんし君こちらはプログラミング初心者の方向けのHTMLとCSSの基本的な学習用ページです。ここで紹介している学習カリキュラムをやりきれば、最終的にこちらのようなWebサイトを作成可能です。 ...
続きを見る

ではさっそく見ていきましょう。

HTMLのhead要素の解説

今回解説するコードは以下の記事で使ったものと同じです。

: HTMLとCSSとWEBページの関係性【理解できます】
あなたHTMLとCSSとWEBページってどんな関係性なんでしょうか？ HTMLとCSSの勉強を始めるとHTMLとCSSを使ってWEBページをつくることができるというような言葉をよく見ますよね。 ...
続きを見る

※まだHTMLファイルのコードを持っていない方は、この記事内にコードを載せているので用意してください。

今回はそのHTMLファイルのhead部分を解説します。

以下はコードの1部です。

この<head>から</head>に囲まれているのがhead要素です。

<head>
    <title>テストサイト</title>
    <metacharset="utf-8">
        <linkhref="css /style.css"rel="stylesheet" type="text/css" media="all">
</head>

こちらがタイトル部分になります。

 <title>テストサイト</title>

こちらがメタタグです。終了タグは有りません。

<metacharset="utf-8">

そして最後。

以下の部分ではcssを読み込んでいます。

もうあなたならすぐにわかりますよね？

 <linkhref="css /style.css"rel="stylesheet" type="text/css" media="all">

以上でheadタグ内の記述の説明は終わりです。

次回はいよいよHTMLのメイン部分であるbodyの中身を解説していきます。

今回はここまでです。

ありがとうございました。

\ HTMLとCSSについて最初から学びたい方はこちら /

: 【完全無料】HTMLとCSSの学習ステップ一覧
てんし君こちらはプログラミング初心者の方向けのHTMLとCSSの基本的な学習用ページです。ここで紹介している学習カリキュラムをやりきれば、最終的にこちらのようなWebサイトを作成可能です。 ...
続きを見る

\ Web制作の副業で今すぐ稼ぎたい方はこちら /

: 【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】
あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの？スクール選びで失敗はしたくないです。 ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...
続きを見る