初心者の為のHTML学習【基礎編】

  • 2019年8月8日
  • 2019年8月10日
  • HTML
HTMLのメイン画像

HTMLとは

HTML(エイチティーエムエル)とはHyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)の略称で、HyperText(すごいテキスト)を書くためのマークアップ言語です。

ようは、文章の中にリンクを付けたりメディア(画像や動画)を追加する事等可能となったテキスト(HyperText)をタグを使い文章に意味を付けていく(Markup)していく言語です。

HTMLの書き方と説明

HTMLはメモ帳さえあれば書くことができます。

すごく簡単なHTMLの一例です。

上から順番に説明します
ここではざっくり説明するだけですので、流し読みしていただいてOKです。

<!DOCTYPE html>はこれはHTMLですよとブラウザ等に伝えるために記述しています。

2行目の<html lang=”ja”>の< lang=”ja”>はこのドキュメントは日本語ですよと伝えるために記述されています。

<html>ここの部分に関して、11行目に</html>と書かれています。

この二つを合わせて要素と呼びます。

imgタグ等一部を除き、要素には始まりと終わりを書かなければなりません。

この場合は2行目の<html lang=”ja”>~11行目の</html>までがHTMLですよと書いていることになります。

同様に3行目に<head>6行目に</head>で3~6行目がhead要素であることを示しています。

head要素はブラウザに表示されない要素をブラウザやgoogleのクローラーと言われているロボットに伝えるために記述します。

5行目の<meta charset=”utf-8″>で文字コードをブラウザに伝えて、6行目<title>In-OutPut</title>でページのタイトルを書いています。

7行目~10行目がbodyタグとなり、ブラウザ上で表示される内容を書いています。

<h>タグで囲まれると見出しを表し<p>タグの中に文章を書いていくのが基本となります。

このコードをメモ帳等に張り付け、拡張子を<.html>としてあげ、ブラウザで読み込むとサイトが表示されます。

初心者がHTMLを学習するのにかかる時間

これからHTMLを学習するのにどれだけの時間を費やせばいいのか、HTMLが使えるようになるためにはどれくらい時間がかかるのか。

この疑問にざっくり回答をしますと、HTMLを何のために学ぶのかによってゴールが違うのでゴールの長さによって時間は違います。とはいえ、HTMLはそれ自体は難しくないので、1日~2日で、HTMLがある程度読めるようになり、テキストエディターを使えば、書けるようになるかと思います。

フリーランス等でWEB製作を行うようになりたいなら「セクショニングコンテンツ」を正しく使いマークアップできるようにならなければならないので、学習の時間は少し長くなります。

HTMLとSEOの関係

HTMLとSEOには深い関係があります。

ここでよく議題となるのが、正しいマークアップはSEOに効果があるのかどうかですが、個人的には正しいマークアップはSEOに効果はあるとおもいます。

とはいえ、SEOで一番大事なのはコンテンツです。

検索された文言に対して、適切な回答(コンテンツ)が用意されている事がSEOで一番重要な事ですが、適切なコンテンツを用意されていることをgoogleに伝えるために正しいマークアップは行ったほうがいいです。

例えば、ローカルSEO(地域+〇〇)での検索等で上位表示を狙うなら、<adress>タグという住所を使って自社(自店舗)の場所をgoogleに伝えてあげたほうが上位表示されやすくなるのは明確です。

とはいえ、この住所が記載されているコンテンツが設置されていることが一番重要ですので、HTMLを素早く覚えて自分のコンテンツを増やしていきましょう。

>プログラミング情報サイト「In-Output」

プログラミング情報サイト「In-Output」

当サイトではプログラミング言語の情報を発信しています。
HTMLやCSSのマークアップ言語の学習方法や解説、WordPressでのサイト開設方法、python等のプログラミング言語を使用して日頃の作業の効率化等、皆様のお役に立てるサイトを目指しています。

CTR IMG