JavaScript勉強会

JavaScriptの学習日記

ドットインストール HTML入門 学習メモ

ドットインストールHTML入門を学んで、気になったところなどをメモ。

http://dotinstall.com/lessons/basic_html_v3

 

jsstudy.hatenablog.com

 

#01 HTMLとはなにか? (02:56)

HTMLは、<html>や<div>みたいな記号(タグ)を使って、素の文章にいろんな情報を付けられる言語のこと。

caniuseは、「Can I use」の略なんですね。

 

#02 必要なツールを用意しよう (02:55)

「1」「l」「|」など、英数字や記号が見分けやすいフォントが便利ですね。

 

qiita.com

 

#03 タグと属性を理解しよう (02:20)

「tag」(タグ)は、日本語だと「札」(ふだ)という意味です。

  • タグ <p>のような記号のこと。(「<」で始まり「>」で終わる記号)
  • 属性 <p class="message">のように、細かい設定を指定する部分のこと。

HTMLは、素の文章にタグをぶち込んで、様々な情報(見出し、段落など)を追加する道具ですね?

 

#04 はじめてのHTML (02:07)

HTML文書の基本構造は、これだけです。

<html>
  <head>
    ここに付加情報(ブラウザーで表示されない)
  </head>
  <body>
    ここに本文(ブラウザーで表示される)
  </body>
</html>
  • <html>で始まり、</html>で終わる。
  • <head>と</head>の間に、付加情報(メタ情報)=ページのタイトルなどを入れる。
  • <head>のところに書いた情報は、ブラウザー上には表示されない。
  • <body>と</body>の間に、本文を入れる。
  • <body>のところに書いた情報は、ブラウザー上に表示される。

 

デフォルトのWebページ名は、Webサーバーの設定で変えられます。

  • Apache(Webサーバーソフト)の場合、「index.html」や「default.html」というファイル名のWebページが、最初に表示されるページになります。
  • ブラウザーで、URLのページ名を指定しなかった場合、Webサーバーが「index.html」を探して表示する)

この慣例によって、Webページのファイル名には「index.html」という名前がよく使われます。

 

#05 meta、linkタグを使ってみよう (02:44)

HTMLタグに全角スペース文字を混ぜ込むとエラーの原因になるので注意!

(例)

  • <meta charset="UTF-8">というメタタグの中で、「meta」と「charset」の間は半角スペース文字「 」でないといけない。
  • 間違えて全角スペース文字「 」を書いてしまうと、ブラウザーがmetaタグと認識しなくて、文字化けエラーの原因になったりする。

 

日本語のWebページだと結構ありがちなミスなので、HTMLの文法・記述をチェックするツールが役立ちます。

 

programming-study.com

 

#06 styleタグを使ってみよう (02:33)

<head>タグ内に書ける情報として、<style>タグなどがある。

  • <style>タグで見た目の情報(CSSの設定)を追加できる。
  • (ただし、CSSは別ファイルに分離して用意する方法のほうが一般的)

 

HTMLのコメントタグ

  • 「<!--」と「-->」の間に書いた文章はコメントになり、表示や動作には関係ない。
  • コメントアウト → コードをコメントにして無効化すること
  • アンコメント → (コメントアウトして無効化した)コードのコメント記号を外して、再び有効なコードにすること

 

#07 id、class、style属性を使ってみよう (02:28)

属性(attribute、property)の名前や値の書き方

  • <p class="message">文章</p>は、pタグ(パラグラフ=段落)に、classという属性を設定して、classにmessageという属性値を設定している。
  • 「id」「class」「style」という属性は、CSS(見た目の設定)で使われるものなので、その意味や機能はCSSを勉強するときに理解すればOK?
  • とりあえず、HTMLタグには「属性」という情報が設定できることを知っておけばOK?

 

#08 セクションについて理解しよう (02:35)

HTML文書の「アウトライン」って何?

 

(参考)

アウトラインとは - IT用語辞典 Weblio辞書

(1) 物の外側の線。輪郭。

(2) あらまし。あらすじ。大要。 「事件の-を話す」

アウトラインとは、一般的には輪郭大筋といった意味を表す単語である。

 

アウトラインとは?|HTML5基礎知識|アウトラインのルール

アウトラインとはHTML5文書の概要を階層的に表すもので本に例えるならば、章・節・項といった目次のようなものです。

Webページを本のように文章から章・節・項といった見出しになるようなものを抜き出してアウトライン、すなわち、文書の階層的な目次を作ろうというわけです。

HTML5文書ではこのアウトラインを強く意識して作成する必要があります。

 

HTMLのカテゴリーとコンテンツモデルを理解する | できるネット

HTMLのセクションとアウトラインを理解する | できるネット

 

HTMLのアウトラインは、文章の階層構造って意味ですね?

HTML4とHTML5の違いについて、新たに追加された「コンテンツモデル」などの概念を知っておく必要があるようです。(面倒)

 

HTML5で追加された<section>タグや<article>タグの使い分けがよく分からなかったのですが、何となく分かって来ました。

  • article: 独立しているコンテンツ
  • section: それ以外の情報の塊

 

#09 アウトラインを意識してみよう (02:43)

<section>と<article>のマークアップの見本が見られます。

 

なるほど、こんなふうに分けていくんですね!

  • <section>で区切る。
  • 1つの記事(読み物)に該当する部分を<article>で囲む。

 

#10 h1-h6タグで見出しを付けよう (02:28)

<h1>、<h2>、…、<h6>の見出しタグは、ヘッディング・コンテンツ(Heading content)と呼ばれてます。

ドットインストールの説明では、<section>タグが適切に区切られていれば、<h1>を何度も使ってマークアップできる、とのこと。

 

→ しかし、ちょっと違和感があったので、SEO的にどうなのか?調べてみました。

 

<h1>を何度も使って良い派の見解

SEOに有利?不利?エンジニアが見るHTML5とSEO | SEO HACKS公式ブログ

最上位の見出しであるh1要素はSEO上、1つの文書内で1度しか利用できないというルールがありました。HTML5の場合も、このルールに従っていれば何ら問題はありません。

一方でHTML5の場合、新たに追加されたsection要素のようなセクショニング・コンテンツの深さを使ってセクションを表現することもできます。h1要素を複数使用されていても、それぞれのセクションにおける見出しのレベルを区別できるようになっています。

上述の2つの例に優劣はありません。単に選択肢が増えただけなので、使いやすい方を選べばよいでしょう。

 

<h1>は1回だけ派の見解

SEO対策として最低限押さえておきたいHTML/HTML5マークアップの大事な6つのポイント | creive

HTML5では1ページ内に複数のh1タグを使用してもよいことになっていますが、それはあくまでsectionタグのようなHTML5タグを用いて各h1タグを含む文章が正しく構造的にマークアップされているときだけです。

本当は中見出しや小見出しを用いるべきところでh1タグを用いると文章構造が崩れてしまい、コンテンツ作成者が意図しない構造として検索エンジンに解釈されてしまう恐れがあります。これは検索エンジン対策としては逆効果です。

もちろん、sectionタグを適切に使用してh1タグのみで見出しを構成するとサイトリニューアル時に見出しのナンバリングを気にする必要がないメリットがあります。ただ、そのかわり文章構造を厳密に気にする必要が生じるデメリットが生じます。さらに、sectionタグで囲む作業に時間と労力がかかること、加筆・再編集には不向きなこともh1タグのみでの見出し付けの懸案事項です。

sectionタグを用いてh1タグのみでの見出し付けも中見出しと小見出しを用いた見出し付けも検索エンジンに伝わる文章構造は同じであることを考えると、h1タグは1ページに1つだけ用いる方がサイト運営上無難です。

 

後で変更する可能性が高いコンテンツの場合、

  1. <section>タグでアウトラインを表現する
  2. <h1>~<h6>タグでアウトラインを表現する

どちらが楽か?という話になりますね。

極端な場合、sectionタグを一切書かなくても、見出しタグで階層がつけられていれば、SEO的に有利かな?

どちらも一長一短ですが、ドットインストールの説明通り、<section>で区切った場合は<h1>タグを繰り返し使ってOK、というやり方にしてみます。

 

#11 p、hr、pre、blockquote、divを使おう (02:52)

<div>は、CSSを適用する範囲を区切るために使う、と。

 

#12 ol、ul、li、dl、dt、ddでリストを作ろう (02:48)

  • <ol>、<ul>、<li>は、よく使っていたけど、
  • <dl>、<dt>、<dd>は、全然使ってなかった。

タグの表記は略語が多いので、意味を理解して、適切に使い分けたい。

 

#13 strong、br、spanを使ってみよう (01:45)

<span>も、CSSを適用する範囲を区切るために使う。

 

→ ブロックレベル要素(<div>)とインライン要素(<span>)の違いは、CSS入門の第18回で説明されてました。

 

(参考)

ブロックレベル要素とインライン要素-HTMLの基本

ブロックレベル要素は、見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック(かたまり)として認識されます。

インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。

 

インライン要素とブロックレベル要素の違いと特徴【HTML】

f:id:jsstudy:20170923235433j:plain

  • ブロックレベル要素は「縦に積まれる」
  • インライン要素は「横に並ぶ」

 

  • <div> → ブロックレベル要素で使う
  • <span> → インライン要素で使う

という使い分けになってます。

(<div>~</div>の中に<span>は置けるけど、<span>~</span>の中に<div>は置けない。)

 

#14 aタグでリンクを設定しよう (02:37)

アンカータグ<a>のポイントは3つ。

  1. href属性で、移動先を指定
  2. target属性で、移動先のページの開き方を指定
  3. #で、ページ内遷移を指定できる

 

#15 imgタグで画像を表示させよう (01:27)

<img>タグは、src属性で画像ファイルを指定する。

 

HTML5は、SVG画像も扱えるようになって、パワーアップ!?

qiita.com

 

#16 tableタグで表組みを作ろう (02:57)

<table>タグで表組みするとき、colspan属性とrowspan属性を使って、自由自在にセル結合できるようにしておくと便利。

 

(参考)HTML5/テーブル/td要素 セルを結合する - TAG index

→ パズルみたいに、セルをつなげる遊びをやると上達します。

Dreamweaverとか、HTML編集ソフトを使うと簡単にできてしまいますが。。。)

 

#17 formタグでフォームを作ろう (03:00)

  • <form>タグを使うと、クライアント(ブラウザー)側からサーバー側へデータを送ることができる。
  • データの送信方式(HTTPメソッド)は、「get」や「post」などが選べる。

 

HTTPメソッドの使い方は、PHP入門での28回でちょっと説明されてました。

(参考)【PHP】GETとPOSTの違い、使い分けと使い方を紹介

GETメソッドはURLの末尾に「?」をつけ、「パラメーター名="値"」という形式でデータを送ります。

POSTメソッドで送るデータはWebブラウザ上には現れません。

 

#18 inputタグで入力部品を作ろう (02:53)

  • <input>タグは、<form>タグの中で使うパーツ。
  • 文字の入力欄などに使う。
  • いろんな属性を設定して使う。

 

#19 textarea、buttonタグを使ってみよう (02:44)

  • <textarea>タグや<button>タグは、<form>タグの中で使うパーツ。
  • 送信ボタンなどで使う。
  • いろんな属性を設定して使う。

 

#20 checkbox、radio、labelを使ってみよう (02:57)

  • <checkbox>、<radio>、<label>タグは、<form>タグの中で使うパーツ。
  • 選択肢を作るときに使う。
  • いろんな属性を設定して使う。

 

<label>タグで、選択する部分(クリック、タップ)の範囲を広げることができる。

→ ちゃんとした使い方をしてなかったので、勉強になりました!

 

#21 selectタグでセレクトボックスを作ろう (02:41)

  • <select>、<option>、<label>タグは、<form>タグの中で使うパーツ。
  • 選択肢(ドロップダウンリスト)を作るときに使う。
  • いろんな属性を設定して使う。

 

#22 HTML5から使える属性を使ってみよう (02:31)

<input>タグの属性で、

  • 「email」  → メードアドレス入力欄
  • 「number」 → 数値入力欄
  • 「date」  → 日付入力欄

などが使える。

ブラウザーでバリデーション(入力値の検査)をやらせることができるので便利!

(ただし、HTML5に対応してないブラウザーだとダメみたいです。)

 

<input type="number">は、今後使うようにします。

 

#23 文字参照を使ってみよう (02:30)

HTMLタグの中で使えない文字や特殊な文字を表示するときに、文字参照という表記方法を使う。

 

(参考)HTMLタグ/HTMLの基本/文字参照 - TAG index

「©」は「&copy;」と書けばOK

 

#24 コンテンツモデルを理解しよう (02:54)

 HTML5のタグには、

  1. 「カテゴリー」
  2. 「コンテンツモデル」

という分類がある。

 

これらはW3Cのリファレンスに載っている。

https://www.w3.org/TR/html5/

 

覚えるのは面倒くさいので、HTMLの文法チェッカーを使って、間違っていたら訂正するぐらいでOK?

https://validator.w3.org/

 

(参考)

qiita.com

カテゴリーに分類された要素を、
コンテンツモデルというルールに基づいてマークアップをする 

 

HTML5では、一緒に使えるタグと使えないタグを分けて、綺麗に書いてくれ!ってことみたいですねw

 

f:id:jsstudy:20170924014803j:plain

 

まとめ

ドットインストールの「HTML入門」を見たら、今までHTML5を適当に使っていたことが分かりましたw

HTMLを学んだことがある人でも、穴埋めや復習になるので役立つと思います。

 

ただ、初めて学ぶ場合は、説明が早くてちょっと分かりづらいかも?と思いました。

(何回も見るか、分からないところはGoogle検索すればOK?)

 

引き続き、ドットインストールでCSS入門JavaScript入門も見てみたいと思います。

 

 

たった1日で基本が身に付く!  HTML&CSS 超入門

たった1日で基本が身に付く! HTML&CSS 超入門