タグ
Web
2021年6月15日
みなさんこんにちは。
ケミストのWeb担当みやのです。
「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。
さて今回は「タグ」について書きます。
タグとはなんぞ
<タグ名>タグの中身</タグ名>タグとは、< と >で囲まれた半角の英数字のことで、HTMLにおける「命令文」を表すのに使います。
<タグ名>～</タグ名>で1セットで（例外もある）これを要素といいます。
<タグ名>を開始タグ
</タグ名>を終了タグ（閉じタグ）
といいます。
<タグ名 〇〇="△△">のように開始タグの中に情報を書くことがあり、これを属性といいます。
よく使うタグ一覧
思いのほかたくさんあったので折りたたみました。
| <a> | リンクを設定する Anchor |
|---|---|
| <article> | 記事コンテンツ Article Contents |
| <body> | そのページの本文 Document Body |
| <br> | 改行（pタグより行間が狭い） 閉じタグはなし Line Break |
| <button> | ボタン |
| <code> | コードを掲載する Inline Code |
| <div> | ブロック（縦積み）要素 Content Division |
| <form> | 入力フォーム |
| <h1～6> | 見出し 数字が小さいほど文字が大きい h1はSEOにおいて重要な意味を持つ HTML Section Heading |
| <head> | そのページのメタデータ（データについてのデータ。なんのこっちゃ）や外部リソースを記載する 実際には表示されない Document Metadata（Header） |
| <hr> | 区切り線 閉じタグはなし Thematic Break（Horizontal Rule） |
| <html> | HTML文書であることを示す HTML Document |
| <iframe> | 動画や地図を埋め込む Inline Frame |
| <img> | 画像を埋め込む 閉じタグはなし Image Embed |
| <input> | フォームの入力欄 閉じタグはなし |
| <li> | リストの各項目 List |
| <link> | 外部リソースへのリンク 閉じタグはなし External Resource Link |
| <meta> | メタデータ 閉じタグはなし Document-level Metadata |
| <nav> | ナビゲーションメニュー Navigation Section |
| <p> | 段落 Paragraph |
| <pre> | 整形済みテキスト 改行や空白がそのまま適用される Preformatted Text |
| <script> | JavaScriptやjQueryなどを記載する |
| <section> | その部分が1つのまとまりであることを示す 汎用セクション Generic Section |
| <span> | インライン（横並び）要素 |
| <style> | スタイルを直接ヘッダーに記載する Style Information |
| <table> | 表 |
| <td> | 表のセル Table Data Cell |
| <textarea> | フォームの自由入力欄 |
| <th> | 表の見出しセル Table Head |
| <title> | そのページのタイトル SEOにおいて重要な意味を持つ Document Title |
| <tr> | 表の行 Table Row |
| <ul> | 順序のないリスト Unordered List |
タグを使ってHTMLを書く
<!DOCTYPE html>まずはこのように記載し、このファイルがHTML文書であることを宣言します。
<!DOCTYPE html>
<html>
</html>次に<html>と</html>を記載します。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html><html>と</html>の間に<head></head>と<body></body>を記載します。
これを入れ子構造といいます。
<!DOCTYPE html>
<html>
<head>
<title>CHEMIST（ケミスト）｜福岡の薬局コンサルティング</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>ブログタイトル</h1>
<img src="sample.jpg" class="w-100">
<p class="mt-4">記事本文</p>
<script src="js/main.js"></script>
</body>
</html><head>と</head>の間にページタイトルやメタデータ、<body>と</body>の間にページ内容やスクリプトを記載します。
基本はこんな感じです。
な... 何を言っているのか わからねーと思うが 自分でも何を言っているのかわからなくなってきました。
まとめ
まとめると
・<タグ名>と</タグ名>で挟む
・ただし例外もある
・開始タグの中に属性を書く
次回はタグの「属性」について書こうと思います。
上記の例でいうとclass、href、rel、srcなどですね。
この記事を書いた人
みやの
Web・DTP担当
