HTML/CSS

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

2020年12月27日

HTMLのhead要素を理解して記述できるようになろうと書かれた画像

 

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

 

これまではプログラミング未経験者の方に向けてHTMLとCSSの意味やWEBページの基本を解説してきました。

 

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

 

ちなみにこの記事は連載記事の1つです。こちらから学習を進めておいてください。

>>HTMLとCSSの学習ステップ一覧はコチラ

 

【この記事でわかること】

HTMLのheadの記述方法

 

【この記事の信頼性】

この記事を書いている僕は現役のWEBエンジニアです。

普段からHTMLとCSSを使ってWEBページを制作しています。

 

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

 

HTMLのhead要素の解説

 

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

>>HTMLとCSSとWEBページの関係性【理解できます】

 

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

 

【この章でわかること】

・HTMLファイルのhead部分の意味

 

head部分の意味を解説

 

コードの1部です。

 

index.htnl

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

 

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

 

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

index.htnl

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

 

メタタグです。終了タグは有りません。

index.htnl

<metacharset="utf-8">
 
 
でも解説しています。
 

 

こちらではcssを読み込んでいます。

 

index.htnl

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

 

以上で終わりです。

 

次回はいよいよbodyの中身を解説していきます。

今回はここまでです。

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

 

HTMLとCSSの教材をまだ準備していない方は準備しましょう。

>>HTMLとCSSのオススメ教材を紹介【失敗しない】

 

学習ステップの全体はコチラ

>>HTMLとCSSの学習ステップ一覧

 

僕も通ったHTMLとCSSを学ぶことができるスクールはコチラ

>>HTML/CSSを習得できるプログラミングスクールランキング

 

プログラミングスクールに関する情報

2021年最新プログラミングスクール おすすめランキング 【WEBエンジニアになりたい方向け】と書かれた画像
【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】

  あなたプログラミングスクールに通いたいけどたくさんありすぎてどこがいいのかわかりません。   最近はエンジニアブームということもありプログラミングスクールが増えました。 一方でたくさんありすぎてど ...

続きを見る

フリーランス
無料あり:フリーランスを目指せるプログラミングスクールランキング【体験をもとに徹底分析しました】

  あなたフリーランスエンジニアを目指すことができるプログラミングスクールってありますか?   最近では、高年収や働きやすさの魅力からフリーランスエンジニアを目指す方も増えてきまし ...

続きを見る

返金保証ありのプログラミングスクールランキング【エンジニアが選びました】と表示されたパソコンの画面
返金保証ありのプログラミングスクールランキング【エンジニアが選びました】

  あなた返金保証がついているオススメのプログラミングスクールってありますか?   結論から話すと、返金保証つきのプログラミングスクールランキングは次の通りです。 1位:テックキャンプ  【転職成功率 ...

続きを見る

WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】と書かれた画像
WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】

  あなたWEB系の自社開発企業に就職したいです。 オススメのスクールを教えて下さい。   エンジニアを目指すにあたってまず最初に自社開発企業への転職を希望する方がほとんどです。 ...

続きを見る

プログラミンングスクールに無料で通うならココ【現役エンジニアおすすめ】と書かれた画像
プログラミンングスクールに無料で通うならココ【現役エンジニアおすすめ】

  あなたプログラミングスクールに通いたいけどどのスクールも何十万もして通えません。コスパよくエンジニアになれるスクールはありますか?   今回はコスパが良いどころか完全に無料でプ ...

続きを見る

-HTML/CSS

© 2021 エンジニアてんし君ブログ