体系的に学ぶHTMLの超・入門編

Ippei

今日は駆け出しエンジニアのためのHTMLとCSSについて書いていきたいと思います。

超基本的な部分から説明していきます。

もしよろしければエディターなどに記載してみてください。

まず、タグの説明からしていきたいと思います。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    <body>
        <h1>HELLO WORLD</h1>
    </body>
</html>

まずこちらのようなものをコードと呼ぶのですが、駆け出しエンジニアの皆様は見たことありますか？

解説をしていきますと、<!DOCTYPE html>というタグは、この文章はHTML５ですよ～というのを指すために記述されます。文書の先頭に記入する必要があり、<html></html>タグより上に存在している必要があります。

次にhtmlタグです。こちらに関しましては今からHTMLを記述していくよ～というのを宣言しています。

その中にheadタグとbodyを記入していきます。

headタグとbodyタグを簡単に説明しますと。

headタグというのは、自分側に見えるが、画面表示をしたときに見えない情報などを記入していきます。ここにcssへのリンクやmetaタグ、bodyタグなどを書いていきます。

bodyタグに関しましては、headタグとは反対に画面表示をしたときにクライアント側が見える情報を表示していきます。

では、こちらのタグの中身を見ていきましょう。

まずheadタグの中身に<meta charset="UTF-8">と書いてありますね。こちらはこちらは文字表記の指定をしております。こちらを指定することにより、文字化けを防いでくれるという効果があります。

このほかにもdescriptionなど様々なプロパティを指定することが出来ます。

その次にtitleタグです。こちらはクライアント側に見える情報ではありますが、直接画面に出力するものではありません。Google chromeやその他のブラウザを使っている人は画面の一番上の部分を見てみてください。

そうです、一番上のタブ部分に表示されているものこそtitleタグの中身なのです。もし、現在見ているのがGoogle chromeなら、プラスを追加し新しいタブを表示してみてください。

新しいタブと書いてあるものこそtitleタグの中身なのです。

そして、次にbodyタグの中身について話していきます。

bodyタグの中身にh1タグと書いてありますね。こちらは見出しのタグの意味を示しています。これはh1~h6まであり、文章に階層構造を持たせるために書いております。

これを記入することにより、キーとなるメッセージをユーザーによりわかりやすく伝えることが出来ます。


まとめ

こちらはHTMLの初歩の初歩です。Progateやドットインストールと併用しながら進めていってください。

これからたくさん更新していくので楽しみにしておいてください。

もし、わからない部分や疑問点があったらコメントの部分からご質問ください。

この記事が気に入ったらサポートをしてみませんか？