We Blog Weblog

タグ

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>の間にページ内容やスクリプトを記載します。

基本はこんな感じです。
な... 何を言っているのか わからねーと思うが 自分でも何を言っているのかわからなくなってきました。

まとめ

まとめると

・<タグ名>と</タグ名>で挟む

・ただし例外もある

・開始タグの中に属性を書く

当サイトに関するご意見、ご感想、制作のご依頼はお問い合わせフォームのほか、Chatworkでも受け付けております。

私たちは、クラウド型ビジネスチャットChatworkを導入しています。

国内利用者数No.1 中小企業向けビジネスチャット「Chatwork」

次回はタグの「属性」について書こうと思います。
上記の例でいうとclasshrefrelsrcなどですね。

この記事を書いた人
みやの
Web・DTP担当

Contact Us

ご意見、ご相談、料金のお見積もりなど、お気軽にお問い合わせください。

お問い合わせはこちら

TOP