Zenn
👌

【4日目】HTML/CSSを理解する。

2023/11/11に公開
初心者
tech

https://zenn.dev/yama227/articles/529e6dab65cf32

Webサイトの仕組み

Webサイトは、HTMLとCSSによって構成されています。

そして、Webサイトが検索にヒットし表示される仕組みは以下です。

HTMLとは

HTMLとは、「Hyper Text Markup Language」の略称で、文書を組み立てる役割を果たします。

テキストエディタを使ってHTMLを記述していきます。

タグ

HTMLは以下のように記載します。

<h1>hogehoge</h1>

ちなみに、「</h1>」のように終了タグが必要ない要素もいくつか存在しています。

  • br：改行する
  • hr：水平線を表示させる
  • img：画像を表示させる

HTMLを書いてみる

DOCTYPE宣言

HTMLではじめに記述するのはDOCTYPE宣言です。

<!DOCTYPE html>

DOCTYPE宣言を行うことで、「このファイルはHTMLです」とブラウザが認識できるようになります。逆に言えば、DOCTYPE宣言がないとHTMLとして認識されません。

HTML要素

続いて、HTML要素範囲を決めます。

<html></html>

コード全体を上記要素で囲むことで、HTMLとして認識されます。

head要素

head要素は、タイトルや説明文などを記述する場所です。

<!DOCTYPE html>                                                      
<html>                                                               
<head>                                                               
</head>                                                              
</html>

title要素

title要素は、Webサイトのタイトルを記述する場所です。

<!DOCTYPE html>                                                      
<html>                                                               
<head>                                                               
<title>Webサイトやで！</title>                                             
</head>                                                              
</html>

meta要素

meta要素は、サイトのディスクリプションを記述する場所です。

<!DOCTYPE html>                                                      
<html>                                                               
<head>                                                               
  <title>Webサイトやで！</title>                                             
  <meta name="description" content="Webサイトなんやで">               
</head>                                                              
</html>

bodyタグ

bodyタグは、見出しや文章などを記述する場所です。

<!DOCTYPE html>                                                      
<html>                                                               
<head>                                                               
  <title>Webサイトやで</title>                                             
  <meta name="description" content="Webサイトなんやで">               
  <meta charset="utf-8">                                            
</head>                                                              
 <body>                                                               
 </body>                                                              
</html>

この中に、以下のようなタグを入れていきます。

  • header
  • main
  • footer

Discussion