ホームページ制作初心者のためのHTMLタグの基礎知識・書き方がわかる記事5選

2018年05月25日

CMS・Webサイト制作

Web担当者様は、ホームページの改修の対応の際に、外注先や制作メンバーとうまくコミュニケーションがとれないと感じたことがあるのではないでしょうか。
修正点を伝えるために仕様書を作成し、何度かやり取りをして必要があればさらに修正を依頼する、というやりとりは非常に非効率です。

特にHTMLタグ周りについては、SEOに関連する要素も多いため、頻繁に書き換える機会が出てきます。

今回は、HTMLタグの基礎知識と書き方についてわかる記事を5つご紹介します。

MAシェアと国産MAツールランキングを紹介

資料を無料ダウンロード

1. タグ・HTMLとは。ホームページの基礎技術

https://ferret-plus.com/381

タグはHTMLを構成する要素です。HTMLとは、テキストに情報を付加する役割を担うプログラムです。
HTMLはプログラミング言語と違い、情報を「処理」するのではなく、文字装飾などの働きをする「情報を付加する」言語です。
こちらの記事ではHTMLの役割を説明しています。HTMLがそもそも何なのかわからないという方は一読してみましょう。

2. タグの基本的な書き方

https://ferret-plus.com/389

HTMLタグは意外にシンプルな要素で成り立っています。基本書式の種類も膨大な量という訳ではないので、覚えるのは比較的簡単です。テキストエディタにタグを記述し、HTMLファイル形式で保存してブラウザ上で閲覧すればホームページとして閲覧することができます。
まずは簡単な記述から試してみましょう。

3. Aタグの書き方とタグ記述の注意点

https://ferret-plus.com/400

ホームページ内で重要な要素となるAタグについて解説しています。
大文字、小文字どちらでも表記可能で、オプションで追加する命令（属性）も、厳密には決められていないため、比較的融通のきくタグです。
リンク構造をなす基本的なタグとなるので、記述方法や意味についてはある程度理解しておきましょう。

4. 基本タグ・メタ情報と構造化文章の書き方

https://ferret-plus.com/406

ホームページを作成しても、ほとんど検索に引っかからないのでは意味がありません。Google検索エンジンに理解されにくい記述をしてしまうと、インターネットユーザーの目にほとんど触れられないままになってしまいます。そこで重要となるのがメタ情報とよばれる文書自体の情報を付加することです。
こちらの記事ではメタ情報の書き方について解説しています。

5. ホームページを強化するタグ貼り付けをマスターしよう

https://ferret-plus.com/458

ホームページ上にyoutubeの動画を貼り付けたり、GoogleAnalyticsやリスティング広告の情報を付加する時に書くサービスのタグをホームページに貼り付ける必要があります。
こちらの記事では、上記で挙げたような主要サービスのタグを取得する方法を解説しています。

まとめ

実際に自分の手でタグを触ることがなくても、タグの記述ルールが理解できていると社内の制作チームや外部企業との共通言語が増えてコミュニケーションを非常にスムーズに行うことができます。
自分の依頼内容が可能かどうなのかというところもわかるようになるので、差し戻しの数も減ります。
知っておくことで様々なメリットを享受できるので、Web担当者の皆様は少しずつでもタグについての知識を深めておきましょう。