0
0

More than 1 year has passed since last update.

HTMLでの御作法

Last updated at Posted at 2023-02-10

HTMLを書く上での御作法について

  • HTMLファイルであると示す為に、1行目に必ず書かなければいけない!
<!DOCTYPE html>
  • 2行目は下記のHTMLを書く。タグで囲うのはお作法。
<html>
    
</html>
  • headタグを入れる。HTML文章の中での頭。head内に書いたコードはユーザから見えない。ブラウザーで重要な情報をこの中で書く。
<head>
    
</head>
  • では、具体的に何を書くのか?

それは、metaタグのcharset。と utf-8(文字コード) を書く事。文字コードを指定することで、ページの文字化けを防ぐことができる。UTF-8は、HTMLで推奨されている文字コード

<meta charset="utf-8">
  • viewport は→デバイスで見た時にどう写るかの設定を行う。
  • width=device-width は→それぞれのデバイスに合わせて、webサイトを表示させる。
  • nitial-scale=1 は→最初のズームの倍率は1。
<meta neme="viewport" content="width=device-width,initial-scale=1">

titleタグは→タブに出る文言

<title>Web page</title>

Google検索をする上でかなり重要な情報になる。

<meta name="description" content="sample text txet text">

bodyタグの中に書くと、ユーザーから見える。

<body>
あいうえお
かきくけこ
さしすせそ
 </body>

全体的にはこんな感じ。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta neme="viewport" content="width=device-width,initial-scale=1">
    <title>Web page</title>
    <meta name="description" content="sample text txet text">
  </head>

 <bodey>
 あいうえお
 かきくけこ
 さしすせそ
 </body>

</html>

しかし、上記のタグを打たなくても大丈夫である。

html :5 と打ってしまえば、あら不思議。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    aiueo
    kakikuko
    
</body>
</html>

こんな感じで、この中で作業をする。て事ですね

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0