(初心者向け)HTMLの概要02
html要素
html要素は文章の最上位（ルート）の要素です。文章ぜ全体を包括する要素となります。
htmlには、lang(languageを短縮した文章の言語コード)を記述するのが慣習となっています。
<html lang="ja">
上の文章は日本語になっています。
| 英語 | 日本語 | 中国語 | 韓国語 | フランス語 | ドイツ語 | イタリア語 | スペイン語 | ポルトガル語 | ロシア語 | ヒンディー語 |
|---|---|---|---|---|---|---|---|---|---|---|
| en | ja | zh | ko | fr | de | it | es | pt | ru | hi |
head要素
html文章のタイトル、文字コード、キーワード等の文章の補足情報を記載するのが、head要素です。
CSSやJavaScriptなどの外部読み込みファイルの指定、検索エンジン向けの情報など、様々な情報を必要に応じて記載します。
<head> ~ ~ ~ </head>
title要素
title要素はその名の通りhtml文章のタイトルを表します。title要素はSEO対策の面でも非常に重要であり、すべてのhtml文章はその内容に表す文章をtitleに設定する必要があります。
<title>文章タイトル</title>
meta要素
meta要素は、文字コード、文章の概要・キーワードなど、ブラウザ画面には表示されない文章情報を記述するための要素です。
<meta charset="UTF-8">
TML文書内に追加すると、ブラウザはその文書がUTF-8でエンコードされていることを認識します。
UTF-8は文字コードの一種。
そして、
<meta http-equiv="Content-Type" content"text/html; charset=UTF-8">
のように長い文章で指定することもできます。昔のwebサイトなど、稀にこの形式が使われることがあるので覚えておきましょう。
HTML.5が登場してから見る姿はどんどん減ってきました。
<meta name"description" content="文章の概要が入ります">
ページの概要や内容の要約を提供するためのメタデータを定義しています。この要素は通常、検索エンジンなどのウェブクローラーによって使用され、ページが検索結果で表示される際の説明や概要として表示されることがあります。
<meta name="keywords" content="キーワードA, キーワードB">
検索エンジンによる検索結果のランキングに影響を与えるために使用されていましたが、現在ではほとんどの検索エンジンがこの属性を無視しています。そのため、SEO（検索エンジン最適化）の観点からは、keywords属性はほとんど意味を持たなくなっています。
SEO最適化に意味がないのは、ここで初めて知りました、、
一通り説明が終わったので、次は画像で説明をしてきます。
このプログラムはhtmlのひな形コードサンプルの最小のものです
試しに実行してみましょう。
するとwebページのタイトル要素に[初めてのhtml]というものが追加されました。
ちなみに、９〜１１行目のbody要素に何も書かれていないため画面には何も表示されません。
最後に
今日はheadの中の基本的な要素について買いていきました。
metaタグには他にも様々な種類があります。 今回はその中でも最低限これは覚えておいてほしいというものを出しました。
使用アプリ:
Visual Studio Code
Windows向けダウンロード方法
mac向けダウンロード方法
VSCODEのダウンロードリンク
更新日 3/30 20:00
Discussion