HTML勉強した結果の備忘録。HTMLとは?メタタグって何?

Sponsored Link

しいたけ夫
しいたけ夫

どうも、しいたけ夫(@shiitakeo0326)です。

今日HTMLをドットインストールで勉強していました。しかしながらプログラミング言語って恐らく書いてないと忘れちゃいますよね…。

ドットインストール
HTML, CSS, JavaScript, PHP, Rubyをはじめ、iPhoneやAndroidアプリの作り方も学べます。豊富な3分動画を見ることで、はじめての人でも無理なくスキルを身につけていくことができるプログラミング学習サービスです。

HTMLの基礎についてとりあえずまとめておこうと思います。なんかイメージですけど、こういうプログラミング言語っていきなり専門用語が入ってくるからとっつきにくい。

ドットインストール見ていても思ったのですが、動画が早すぎてついていけないし、なんでこうするのか…という説明がないまま進むので理解出来ないで終わってしまう。

とりあえずこういうもんか…と納得した気でいると後で分からなくなった時に収集つかなくなってしまって辞めてしまう…ということが起きる気がします。

下記の本も参考にしていますのでもし良ければご参照ください。この本を読んで誰かがかいてくれたHTMLやCSSを見てなんとなく理解が出来るようになりました。自分で書くのは難しいですが、後でCSSとか削除するときとかに役立ちそうです。

Sponsored Link

HTMLとは

HTMLとは

H=Hyper
T=Text
M=Markup
L=Language

読み方はエイチティーエムエルとそのまま1文字ずつ読みます。ウェブページを作成する際の文書構造を作成したり、画像を表示させたり、リンクを張ったりすることが出来ます。
よくCSSと見分けが付かないという声もあると思いますが、HTMLが文書の意味を持たせたり、構造を定義するのに対して、CSSはどちらかというとHTMLの装飾をどうするかという言語です。
例えば見出しの【HTMLとは】のところの緑とか、影をつけたりとか、そのような装飾にあたるところはCSSです。(わかるかな?)
Sponsored Link

HTMLの基本構造

<!DOCTYPE html>・・・①
<html lang=”ja”>・・・②
<head>・・・③
<title>タイトル</title>・・・④
<meta name=”discription” content=”サイトの説明分”>・・・⑤
</head>・・・③
<body>・・・⑥
<p>段落<a href=”link先のURL”>リンク先名</a></p>・・・⑦、⑧
</body>・・・⑥
</html>・・・②
これすっごい簡単なHTMLの文章の構造です。実際のページはこれだけで出来上がってたら本当しょぼいぐらいです。ただ最初なのでこんなもので…。
1つずつ備忘録のためまとめておきたいと思います。
ちなみにHTMLを書くときの基本として、
・スペースは半角
・文字コードは小文字・大文字どちらでもOK
・文字コードは全角はNG(文章内とかはOK)
上記は絶対条件なので書くときには気にしてみてみてください。
イメージは下記になります。
字が下手ですみません!IPadで書いてみました!簡単に書くとこんな感じ。イメージとしては↑の画像の中身は木の幹でそこから枝や葉をつけていくイメージ。枝や葉がこの後説明する要素や属性になります。

<!DOCTYPE html>

<!DOCTYPE html>はDOCTYPE宣言と呼ばれており、この文書はHTML5というバージョンで書かれていますよ。と宣言をするものです。

HTML4の場合にはもっと長かったようで、HTML5のDOCTYPE宣言はあまり意味がないと言われているようです。

しかしHTML5で書いた文書も、このDOCTYPE宣言をしないとブラウザで読み込んだ時にレンダリングモードというものになり、別で記載するCSSの装飾等が上手く反映できない可能性があります。

DOCTYPE宣言をすることによって標準モードになり、CSSが記載通りしっかりと反映出来ます。何れにせよ、「今からHTML5で書くね!」「この後に記載するものはHTML5で書いているよ!」とWEB側に知らせるためにも書くものだと覚えておきましょう。

<html lang=”ja”>

html要素は<html>と</html>で囲まれている間のところはHTMLで記載していることを示すタグになります。

話が前後しますが、基本的に要素は<>不等号で挟み、タグの終わりの方には/をつけます。

*例…<p>文書</p>、<html></html>、<head></head>など。

今回はhtml要素にlang属性と呼ばれる、どこの言語で書かれているか示す属性をつけています。この属性はつけてもつけなくてもどちらでも良いのですが最近読んだものだとGoogleはこのlang属性は見てないよっていう記事がありましたのでどちらでも良いかもしれません。

<html lang=”ja”> →html要素に半角スペースを入れて、langを記載し、=”属性値”を記載します。langが属性に対して、””に挟まれたところは属性値といってその値などを記載します。

*例・・・<a href=”画像URL”>など

<head>

<head>はタイトルを設定したり、サイトの説明文などを記載する要素です。この後説明する<title>要素や<meta>要素などもここに入れます。

分かりやすく説明すると本文以外の説明等については、ここに記載します。他にもGoogle Adsenseなどの判別用のコードなどを記載する際もここだったかと思います。(はてなブログでやってた時はheadのとこに入れてくださいって書いてあった)

<title>

<title>は名前の通りブログタイトルを設定します。タイトルもそうですが、ウェブブラウザ上のタブに表示されるのもここの<title>で設定した文言になります。

これも必須なので<head>要素内で記載をするようにしましょう。<head>要素内で記載する理由としては<head>のところで説明した通り、本文以外だからです。

<meta>

<meta>要素は結構難しい気がしていますが、要はウェブに対して、このサイトはこういうサイトだよ!こういうキーワードでこの記事書いてるよ!などをGoogleなどのクローラー(ウェブサイトを自動で巡回しているやつ)に対してアピールするものです。

<meta name=”description” content=”サイトの説明分”>
⇒これはサイトの説明文を記載するものです。discriptionは日本語で「説明・記述」などの意味を持ちます。
<meta name=”keywords” content=”キーワード,html説明”>
⇒サイトのキーワードを記載するものです。キーワードは””ダブルコロンの中に記載し、複数ある場合は,カンマで仕切ります。
昔はこのメタタグやメタキーワードなどを設定することによってSEO対策(検索で上位に表示するなど)に有効と言われていましたが、今はそんなことないようです。
タイトルなどは設定しないとSEOに大きな影響を与えますが、メタタグはあまり気にしなくても良いのかもしれません。

<body>

<body>は分かりやすく言えば、本文です。この中には色んな要素が入ってきます。<body>~</body>で囲まれている間にこの今書いている本文も入っています。

本文でよく使う要素を紹介します。

<h1>~<h6>

これは見出しタグです。<h1>から順番に使っていきます。<h1>は本文中のタイトルのイメージで後は区切りごとに使っていけば良いかと思います。

はてなブログだと大見出しを設定するといきなり<h3>が設定されるそうです。<h1>は基本的にあまり弄ることはないのですが、本文中<h2>からしっかり設定しないとSEOに悪影響があるそうなので数字の小さいところから使っていきましょう。

このブログで言うところの緑で囲われたところが見出しで、それぞれ装飾が違うのはh2とかh3とかによってこのブログは装飾を分けているからです。

<p>

<p>は段落を表す要素です。段落ごとに仕分けをするために使用します。WordPressでもはてなブログでも通常エンターを押すとこの<p>要素で囲われます。

段落として分けるのではなくただの改行の時は</br>(break)を使用します。それだと段落のように1行空いたりせずに改行することができます。

<a>

<a>だけで使用することはありませんが、リンクに飛ばすときにこれを使用します。

<a href=”link先のURL”>リンク先名</a>でリンクを飛ばすことが出来ます。

例えば<a href=”https://www.shiitake0326.net”>しいたけ夫(お)の雑記ブログ</a>でしいたけ夫のHPに移動することが出来ます。
タグを有効にすると・・・⇒しいたけ夫(お)の雑記ブログ

別タブで開く時にはtarget=”_blank”>を追加してあげます。

<a href=”https://www.shiitake0326.net” target=”_blank”>しいたけ夫(お)の雑記ブログ</a>
タグを有効にすると・・・⇒しいたけ夫(お)の雑記ブログ

<img>

<img>要素は画像を表示させるものです。使用するときは下記のように使用します。

<img src=”画像ファイル” width=”400″ height=”300″ alt=”画像の説明”>

srcはsourceソースの略です。どれを元にするかという属性になります。widthは幅(横幅)でheightは高さです。画像の大きさをどうするか設定します。

altは画像が表示されなかったり、読み込みが遅くなった時とかに表示するものです。画像の説明を書いてあると表示されなかった時に親切かと思います。

Sponsored Link

まとめ

いかがでしたでしょうか。

うん、どちらかというとしいたけ夫用の備忘録なので、もしかしたら分かりにくい部分があったかもしれません。

但しHTML勉強したてのしいたけ夫が書いているので、まだみんなに近い目線で書けている気がします。自画自賛ですが。

プログラミング言語って全部を網羅するの難しいので、要素や属性について分からないことがあれば都度調べて、どう使うか把握することが大事な気がします。

しいたけ夫
しいたけ夫

それではまた!

 

 

タイトルとURLをコピーしました