HOME > HTML〈タグ〉についての基礎知識
HTML基礎知識　|　​HTML〈タグ〉についての基礎知識　|　スタイル基礎知識　|　CSS基礎知識

| YouTube【学びBAR】チャンネル

HTML〈タグ〉についての基礎知識

■就職･転職に有利になるHTML,CSSの基礎を3時間で学んで加速度的に編集できるようになるオンラインプログラム
12. Section05-0/11［タグの基礎知識］
タグの機能について
動画を見るだけなら無料で学べます。
講師：NAKA-Gから
HTMLはブラウザーにコンテンツのテキスト、画像、動画などをどのように表示させるかを〈タグ〉という形式で記述していく言語です。
表示させるテキストを入力して〈タグ〉というもので形式を作っていきます。
HTMLが設定された当初は〈タグ〉というものしかなく、〈タグ〉を使用してマークアップするとどのように表示されるか、スタイルが設定されていました。HTMLが設定された当初はスタイルの記述というものは太さと位置的なものが〈タグ〉として設定されていた程度です。
この〈タグ〉の基本的な機能について解説しています。
教材テキストPDFダウンロード、質問できる講座はこちらです。
13. Section05-1/11：［タグの基礎知識］見出しタグ
見出しタグ＜h＞について
動画を見るだけなら無料で学べます。
講師：NAKA-Gから
​html言語の「見出し」を設定する〈タグ〉、英語のheadを略して＜h＞を使ったタグで1〜6までの6種類が設定され、見出し順位登録の役目と表示する基本スタイルを持っています。
実際にエディターに＜h1＞〜＜h6＞までを使って表示と基本スタイルを理解しましょう。
教材テキストPDFダウンロード、質問できる講座はこちらです。
14. Section05-2/11：［タグの基礎知識］段落タグ
本文タグ＜p＞について
動画を見るだけなら無料で学べます。
講師：NAKA-Gから
​html言語の「本文」を設定する〈タグ〉、英語のParagraphを略して＜p＞を使ったタグ類が設定され、本文の役目と表示する基本スタイルを持っています。
実際にエディターに＜p＞を使って表示と基本スタイルを理解しましょう。
教材テキストPDFダウンロード、質問できる講座はこちらです。
15. Section05-3/11：［タグの基礎知識］コメントアウトタグ
コメントアウトタグについて
動画を見るだけなら無料で学べます。
講師：NAKA-Gから
​html書類中に画面には表示されないメッセージやコメントを書き込むことが出来るコメントアウトタグに付いて学びます。
コメントだけでなく表示させたくないコードでこのコメントアウトを使って表示させないように出来ます。
コメントアウトタグの使い方でコーダーとしての技量が分かるほど、使用の仕方でコーダーのレベルが分かります。
教材テキストPDFダウンロード、質問できる講座はこちらです。
16. Section05-4/11：［タグの基礎知識］複数を括れる枠タグ
＜div＞タグについて
動画を見るだけなら無料で学べます。
講師：NAKA-Gから
​html書類中で複数のコンテンツを括ることが出来る＜div＞タグについて解説します。
大きなレイアウトはこの＜div＞で括って、スタイルを割り当てていくと言っても過言ではないほど
レイアウトで重要な機能のタグです。
Html4.0まではこの＜div＞が多用されてきましたが、HTML5.0になり文章構造の中で文章の中身の要素によって
より検索エンジンに正確に内容の要素を伝えられる＜div＞に変わる複数のタグが設定されています。
とりあえず＜div＞でレイアウトを組み立て、後からHTML5.0で新設された要素別のタグに差し替えれば良いので
＜div＞の使い方、基本をマスターしましょう。
教材テキストPDFダウンロード、質問できる講座はこちらです。
17. Section05-5/11：［タグの基礎知識］表タグ
表を作れる＜table＞＜tr＞＜th＞＜td＞タグについて
動画を見るだけなら無料で学べます。
講師：NAKA-Gから
​html書類中に画面には表示されないメッセージやコメントを書き込むことが出来るコメントアウトタグに付いて学びます。
コメントだけでなく表示させたくないコードでこのコメントアウトを使って表示させないように出来ます。
コメントアウトタグの使い方でコーダーとしての技量が分かるほど、使用の仕方でコーダーのレベルが分かります。
教材テキストPDFダウンロード、質問できる講座はこちらです。
18. Section05-6/11：［タグの基礎知識］箇条書きタグ
箇条書きを作れる<ul><ol><li>タグについて
動画を見るだけなら無料で学べます。
講師：NAKA-Gから
​html書類中で箇条書きを設置したいときに使用する＜list＞タグです。
箇条書きには項目位の先頭の表示形式にあわせて2種類あります。
同じ先頭のマークのものと、一項目づつ番号などが変わるものです。
それによって括るタグが2種類あります。
まずは基本を理解しましょう。
教材テキストPDFダウンロード、質問できる講座はこちらです。
19. Section05-7/11：［タグの基礎知識］箇条書きタグを横に並ばせる
横に並ぶ<ul>タグについての設定方法
動画を見るだけなら無料で学べます。
講師：NAKA-Gから
​html書類中でナビ等で横並びにしたい時、箇条書き＜list＞タグを使って横並びにする方法です。
＜list＞タグはブロックレベルなので、本来は下に追加されるブロックレベルですがスタイルを設定して
インラインのように改行しないで横並びにすることが出来ます。
まずは基本を理解しましょう。
教材テキストPDFダウンロード、質問できる講座はこちらです。
20. Section05-8/11：［タグの基礎知識］定義リストタグ
定義リストタグ<dl><dt><dd>について
動画を見るだけなら無料で学べます。
講師：NAKA-Gから
​定義する項目と、その説明というような関連する項目を記述するときに使用する定義リストタグです。
見出しと箇条書きや、見出しと本文でも同じようなレイアウトはスタイル設定で作れますが、
定義する項目と定義したものの説明を関連付けて表示したい時は、この定義リストタグを使って作る方が
検索エンジンにきちんと文章構造や文章の意味合いを伝えられるので活用しましょう。
教材テキストPDFダウンロード、質問できる講座はこちらです。
21. Section05-9/11：［タグの基礎知識］箇条書きタグを横に並ばせる
画像配置タグ＜img＞について​
動画を見るだけなら無料で学べます。
講師：NAKA-Gから
​画像を配置する時使用する＜img＞タグです。
これは単独で置くタグなので、画像を設置したい時使用するタグで、タグの中に画像のソースURLと表示サイズなどを書き込みます。設置するときの記述方法について解説しています。
教材テキストPDFダウンロード、質問できる講座はこちらです。
22. Section05-10/11：［タグの基礎知識］リンク設定（アンカー）タグ
リンクタグ＜a＞について​
動画を見るだけなら無料で学べます。
講師：NAKA-Gから
​文章や画像をクリックすると指定ページへリンクさせたいときに使用するアンカータグ＜a＞です。
同じページの特定場所にリンクを設定したい場合などについて解説しています。
教材テキストPDFダウンロード、質問できる講座はこちらです。
23. Section05-11/11：［タグの基礎知識］まとめ
タグについてのまとめと追加情報
動画を見るだけなら無料で学べます。
講師：NAKA-Gから
基本タグ8種類について解説してきました。現在はタグの数も増えていますが、基本になっているタグはこの8種類ぐらいで、追加されたタグはほとんどのものがスタイルを持っていないので、後から文脈やコンテンツの内容によって適切なタグに差し替えていけば良いと思います。
なぜ沢山タグが増えているかというと、より検索エンジンにコンテンツの内容を正確に伝えるために増えています。
デザインやレイアウトはスタイルでどうにでも変えることが可能ですが、コンテンツの内容や意味合いはタグで検索エンジンに伝えるしか無いので、SEO対策としてもきちんとタグは使い分けしていくことが重要になってくると思いますが、タグよりも見出しや本文のコンテンツが重要なので、観覧者に何を伝えたいのか、読みやすく分かりやすく作ることを心がけてください。
教材テキストPDFダウンロード、質問できる講座はこちらです。
HTML基礎知識　|　​HTML〈タグ〉についての基礎知識　|　スタイル基礎知識　|　CSS基礎知識