みみぺんブログ

WEBデザイナー、エンジニア、プログラマー向けの記事を投稿します

トップ > 未経験でWEB業界 > 【コピペ用】HTML基本コード！覚えるべきところだけを解説

【コピペ用】HTML基本コード！覚えるべきところだけを解説

未経験でWEB業界 かなきち

HTML基本構造を解説！覚えるべき内容を簡潔にまとめました！ こんにちは、かなきち(@kanakichi0801)です

前回は超初級編と言うことでブラウザに文字や画像を表示させたり、リンク(URL)を設置しました。

今回は続きで使用したホームページを作る土台、HTMLの基本構造について解説をしていきます。 blog.mimipen.net

かなきち

この記事を読むと
ホームページの作り方の初歩が分かるよ！





!DOCTYPE htmlとは

<!DOCTYPE html>(ドックタイプ)とはDocument Type Definitionの略です。タグに見えますが、正式にはタグではありません。文章の宣言文の役割になります。

必ず文章の先頭に<!DOCTYPE html>(ドックタイプ)を設置すると覚えましょう。それだけで大丈夫です。

【参考】

<!DOCTYPE html>

htmlタグとは

<!DOCTYPE html>(ドックタイプ)の後に<html>(エイチティーエムエルタグ)を設置します。HTML文書を使うのでhtmlタグを使用する。そんなイメージです。htmlの文章を宣言するエリアをこれで決めます。全ての要素はこの<html>(エイチティーエムエルタグ)の中に記述します。

【参考】

<!DOCTYPE html>

<html lang="ja"><!-- ←htmlタグ(開始タグ) -->

</html><!-- ←htmlタグ(終了タグ) -->


lang属性(lang="")
<html>タグには、基本的にlang属性を追加します。lang属性の立ち位置が微妙でして...
W3Cでは、lang属性を推奨していますが、googleではクローラーが巡回するときにこの lang属性は見ていないそうです。
当ブログでは基本的にW3Cを参考にlang属性は記述していこうかと思います。

headタグとbodyタグ

<html>(エイチティーエムエルタグ)の中に、<head>(ヘッドタグ)と<body>(ヘッドタグ)を記述します。

headタグ

<head>(ヘッドタグ)は少々説明が難しい部分になります。

簡単に説明をすると、<head>(ヘッドタグ)の中にはホームページには表示されない内部設定が入ります。以下が例になります。

  • ホームページの内部設定
  • 外部ファイルの設定
  • 検索やSNSの表示設定

などなど

<head>(ヘッドタグ)は、SEO対策(=検索エンジン最適化)でも重要です。ただ覚えることが多いので、先ずは<meta charset="utf-8">(ユーティーエフエイト)と<title>(タイトルタグ)を記述すると覚えましょう。

※当ブログでは、detectionなどの説明は後に回します。先ずは、ホームページを表示する上で確実に必要なところから説明しています。

メタタグ utf-8とは

「UTF-8(ユーティーエフエイト)」という文字コードを設定するという意味。前回もチラっとお話ししましたが、文字化け防止のためにこのタグを使います。このタグを設置しないと「 æ–‡å—化ã ' 」や「譁 ｭ怜喧縺 」のように文字が化けて表示されます。これを文字化けと言います。

また、<meta>から始まるタグをメタタグといい、ホームページの内部設定はよくこのメタタグを使います。閉じタグはありません。

【参考】

<!DOCTYPE html>

<html lang="ja">

<head>

  <meta charset="utf-8"><!-- ←メタタグ utf-8 -->

</head>

</html>

titleタグとは

前回もお話したようにタイトルを書くタグです。主にブラウザのタブに表示されますが、検索の時のタイトルも以下のように表示されます。

Google検索結果のタイトルを変えるにはタイトルタグをいじろう。
[Google検索結果のタイトル]


余談になりますが、検索で表示されているタイトルを変えて欲しいとクライアントからあったら、こちらの<title>(タイトルタグ)を修正しましょう。ただ、googleの検索結果はgoogleのロボット(クローラー)が回って来ないと反映されないので反映までに遅くて2週間程度かかります。 ※サーチコンソールのURL検査かければ、比較的早く反映される可能性があります。

【参考】

<!DOCTYPE html>

<html lang="ja">

<head>

  <meta charset="utf-8">

  <title></title><!-- ←titleタグ -->

</head>

</html>



次に<body>(ボディータグ)の説明に入っていきます。

bodyタグとは

<body>(ボディータグ)に、ホームページに表示したい内容は、基本的にこの中に書いていきます。

まだまだ先になりますが、JavaScriptやjQueryなどの、ホームページに動きをつけるコードは<body>の閉じタグの直前に書き込むことがあります。

【参考】

<!DOCTYPE html>

<html lang="ja">

<head>

  <meta charset="utf-8">

  <title></title>

</head>

<body><!-- ←bodyタグ(開始タグ) -->

</body><!-- ←bodyタグ(終了タグ) -->

</html>



まとめ

いかがだったでしょうか？今回はホームページの土台ということで、HTMLの基本構造について解説させていただきました。なんとなくイメージが掴めたらそれで大丈夫です！

なんども言いますが、以下のコードはどこかにメモで残しておいてコピペするのをお勧めします。

<!DOCTYPE html>

<html lang="ja">

<head>

  <meta charset="utf-8">

  <title></title>

</head>

<body>

</body>

</html>

次回は、最低限覚えなくてはいけないHTMLタグを紹介していきます。たくさんのタグの種類がありますが、最低限4つのタグでホームページは作れるという内容になっております。

最後までご覧いただきありがとうございます。

この記事がいいなっと思ったら読者登録をお願いいたします♪



【ツイッターでは主に、仕事や技術系の内容をつぶやいています】 技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)