ゼロから始めるエンジニアへの道 #4 ~html編④~ - 初心者がエンジニアに転職するための、壁打ちブログ('ω')

やったこと

1.文章全体のtag付け
2.VSショートカット操作
3.基礎tagの種類のサジェストと、lang / doctyoe / の意味の違いなどなど

06 文書全体につけるタグを見ていこう

文章宣言（HTMLですよ～という宣言）
- これは、うちタグが必要がない(<>)←こんな文章の括り(大文字)

<!DOCTYPE html">

languageの設定(記入、プッシュする言語の宣言)
- html="langgage=ja"

VSコードのショートカット

Tabで「字下げ」行を下げる
- 移動したい行を一括で動かす方法

備忘とコメント　

[DOCTYPE]と[stayle type]、属性ごとの違いなど、昔FAQ作成していた時に何となく属性が違うのだなぁ、とか...
tagの位置で区分けしているんだなぁとかは理解してたけど、WEB開発していくにあたって複数のStayleや、
属性指定を同じ構文の中（ちょっと正確な表現がわからないのですが）で開発するのかなぁと思うので、
怪訝なくこなせるように癖付けをすることも大切なんだと理解...

宣言の種類はなれるように書きながら覚えていこう( ｀ー´)ノ

06 文書全体につけるタグを見ていこう

<!DOCTYPE html>
  <html lang="ja">
    <head>
      <meta charset="utf-8">
      <title>TKのportfolioサイト</title>
      <!--
        タイトルtag（<tile>）の中身は、ブラウザタブに表記される
      -->
      <link rel="icon" href="favicon.ico">
      <!--
        「favicon」とは、タブの小さなicon画像の事を指している。
        　同じ階層に存在するので、データファイル名の指定だけしています　階層が変わった場合の指方法がわからない:(サジェストする)
        　.ico(アイコン)の作り方は少々特殊らしいので別口でサジェスト
      -->
      <meta name="discription" content="TKのportfolioサイトです">
      <!--
        これはContent属性と言って、WEBに公開した時にSEO検索の説明文なに記載　されるようです。
        恐らくdedcriptファイルを作成して、指定する作業が必要なんだと思います。
      -->
      <body>
        <img src="https://cdn.image.st-hatena.com/image/square/da161997713f23479ca06fcaff8c7893ce57a75d/backend=imagemagick;height=128;version=1;width=128/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fblog_custom_icon%2F155897278%2F1583412966696427
        " width="120" height="120" alt="太郎にアイコンです">
          <h1>TK</h1>
          <p>システムエンジニアを目指しています</p>    
      </body>
    </head>
   </html>

コードのコメント備忘について

1.meta tag について

metaタグとは意味/解説/説明（メタタグ）【meta tag】 | Web担当者Forum

【初心者向け】metaタグとは？ | ジーニアスブログ – WEB制作会社ジーニアスウェブのお役立ちブログ

metaについては、なんとなく理解したけど...構文を見てみると、html記法を指定しているがある。。

2.について

!DOCTYPEタグとは｜コーディングのプロが作るHTMLタグ辞典