近年セマンティックHTMLが再評価されています。セマンティックHTMLとは、Webページのコンテンツが持つ「意味」や「役割」を、HTMLのタグを使って正確に伝える記述方法です。見た目を装飾するためではなく「見出し」「段落」「ナビゲーション」などの情報を明確に示し、その情報のその部分が何であるかを明確に定義します。これにより、検索エンジンや音声読み上げソフトな
html5
老朽化したHTMLホームページの修正方法について触れていきます。 「懐かしのサイトを救え」これは弊社の課題であり事業を通じた楽しみの一つでもあります。 「このホームページ、もう10年以上前に作ったきり、ずっとそのままなんだ」 もしあなたがそう感じているなら、それは決して珍しいことではありません。 事業を始めた頃、あるいは新しい挑戦を始めた時に、多額の費用と情
【懐かしのサイトを救え】老朽化したHTMLホームページの修正方法
ホームページのHTML編集方法について触れていきます。ホームページ（ウェブサイト）は基本的にHTMLで構成されています。かつてはHTML単独でHTMLの文書スタイルを設定していましたが、現代ではページの基本構成はHTMLで、外観はスタイルシート・CSSで設定されています。ホームページ修正の基本はこのHTMLとCSSの編集で行います。 ホームページのHTMLを
ホームページのHTML編集方法
ホームページ（ウェブサイト）制作において、記事の公開日や更新日、事業のイベント開催日時などをマークアップするtimeタグは、検索エンジンに対して正確な時間情報を提供する非常に重要な役割を持っています。 インターネット上には日々膨大な情報が追加されており、検索エンジンはどの情報が最新で正確かを常に評価しています。この際、単なるテキストとして「2026年8月18
htmlタグ｜time（タイム）日時・時刻 正確な日時と検索評価
ホームページ（ウェブサイト）制作において、ページに動きをつけたり、ユーザーの行動を分析したりするために、JavaScriptをはじめとするプログラムは非常に重要な役割を果たしています。このプログラムをホームページ（ウェブサイト）内に組み込むために使用されるのが、HTMLの「script」タグです。また、これと対になって使用されることが多い「noscript」
htmlタグ｜script（スクリプト）・noscript SEOと表示速度を最適化する記述方法
ホームページ（ウェブサイト）制作において、ユーザーが実際に画面で見るテキストや画像などのコンテンツとは別に、ブラウザや検索エンジンに対してページの情報を裏側から伝える設定が存在します。この「裏側の情報」をまとめるための領域を作るのがHTMLの「head」タグであり、その中で外部のファイルとページを繋ぐ役割を持つのが「link」タグです。 「head」タグは、
htmlタグ｜head（ヘッド）・link（リンク）SEOを支えるメタデータ
ホームページ（ウェブサイト）制作において、事業に関する専門用語や独自のサービス内容をユーザーへ分かりやすく説明することは、情報の正確性を担保する上で非常に重要です。特定の用語とその意味をセットにして記述し、検索エンジンに対して「ここは用語の定義をしている部分である」と正確に伝えるために使用されるのが、HTMLの「dfn」「dl」「dt」「dd」といったタグで
htmlタグ｜dfn・dl・dt・dd（定義）｜abbr・acronym（略語）｜用語の定義と略語のSEO
現在のホームページ（ウェブサイト）制作において、テキスト情報を正確かつ美しくユーザーに伝えることは非常に重要です。その中で、特定の文字を通常のテキストラインよりも少し上に配置する「上付き文字」と、少し下に配置する「下付き文字」を表現するために使用されるのが、HTMLの「sup」タグと「sub」タグです。「sup」はsuperscriptの略で上付き文字を、「
htmlタグ｜sup・sub（上付き・下付き文字）
ホームページ（ウェブサイト）制作において、ユーザーに情報を視覚的かつ直感的に伝える工夫は非常に重要です。その中で、タスクの進み具合や特定の範囲内にある数値をバー（棒グラフのような形式）で表示するために使用されるのが、HTML5から新しく追加された「progress」タグと「meter」タグです。これらは見た目が似ているため混同されがちですが、それぞれ明確に異
htmlタグ｜progress（プログレス）・meter（メーター）進捗状況や測定値
ホームページ（ウェブサイト）制作において、文章内の特定の言葉を強調し、ユーザーへ正確な情報を伝えることは非常に重要です。その際に頻繁に使用されるHTMLタグとして、文字を太字（ボールド）で表示する「strong」と「b」、そして斜体（イタリック）で表示されることが多い「em」があります。 これらは見た目の装飾を施すだけではなく、HTMLの構造上それぞれに明確
htmlタグ｜strong・b・em・mark（強調・太字・ハイライト）
ホームページ（ウェブサイト）制作において、文章だけで情報を伝えるのではなく、写真や図表、イラストなどの視覚的なコンテンツを組み合わせてユーザーの理解を深めることは非常に重要です。その際、画像や図表と、それに付随する説明文（キャプション）をひとつのグループとして構造化するために使用されるのが、HTMLの「figure」タグと「figcaption」タグです。
htmlタグ｜figure（フィギュア）・figcaption｜画像や図表と説明文
ホームページ（ウェブサイト）制作において、ページとページ、あるいは外部サイトとを繋ぐ役割を果たすaタグ（アンカータグ）は、ウェブという概念そのものを成立させている最も根源的な要素です。このタグを適切に記述し、サイト内の情報構造を相互にリンクでつなぎ合わせることは、ユーザーを目的のコンテンツへ迷うことなくスムーズに誘導するために非常に重要です。 同時に、aタグ
htmlタグ｜a（ アンカー・リンク）
ホームページ（ウェブサイト）制作において、文字の色を変えたり、画像の大きさを調整したりといった画面の見た目（デザイン）を制御するためには、CSS（カスケーディングスタイルシート）を使用します。このCSSの命令を、HTMLの文書内に直接書き込むために使用されるのが「style」タグです。 通常、ホームページ（ウェブサイト）の構造を作るHTMLと、デザインを作る
htmlタグ｜style（スタイル）とCSSによるスタイル指定の優先順位と運用
ホームページ（ウェブサイト）制作において、HTMLファイル内にメモや注釈を残すために使用されるソース中コメントは、制作者同士のコミュニケーションやコードの管理において非常に便利な機能です。コメントとして囲まれた部分のテキストは、ブラウザの画面上には表示されず、検索エンジンの検索結果画面にも基本的には表示されません。そのため、複雑なレイアウトの開始位置や終了位
htmlタグ｜!– — ソース中のコメント
ホームページ（ウェブサイト）制作において、複数の情報や項目を整理し、ユーザーにとって分かりやすく提示することは非常に重要です。その際に頻繁に使用されるのが、リスト（箇条書き）を作成するためのHTMLタグである「li」「ul」「ol」です。 ホームページ（ウェブサイト）上で情報を羅列する際、単に改行を繰り返して文章を並べるだけでは、構造が明確になりません。「u
htmlタグ｜li（リスト）・ul（順不同）・ol（番号順）
ホームページ（ウェブサイト）制作において、ユーザーからの問い合わせや資料請求を獲得するための「入力フォーム」は、事業の成果に直結する非常に重要な要素です。そのフォーム内で、都道府県の選択や、希望するサービス内容の選択など、複数の選択肢を提示する際に使用されるのが、HTMLの「select」「datalist」「option」「optgroup」といったタグで
htmlタグ｜select・datalist・option・optgroup フォームの選択肢とグループ化
ホームページ（ウェブサイト）制作において、ユーザーに情報を伝えるための最も基本的かつ重要なHTMLタグが「p」タグです。「p」は「paragraph（パラグラフ）」の略であり、文章のひとつの「段落」を意味します。見出しタグ（h1〜h6）でページの骨組みを作り、この「p」タグの中に本文となるテキストを記述していくのが、HTML文書の基本的な構造となります。 単
htmlタグ｜p（パラグラフ・段落）
今回は、少し初心に戻りまして、「ホームページ制作や修正の際に注意すべき記述ミス【初心者編】」についてゆったり思いついたことをお伝えしていこうと思います。 ホームページ制作・Web制作に関しても誰しもが最初は初心者ですが、初心者がゼロからホームページ制作をしたりホームページの修正を手がける場合に陥りやすいミスについて思い出しながら書いていきます。 大学生の方と
ホームページ制作や修正の際に注意すべき記述ミス【初心者編】
ホームページ（ウェブサイト）制作において、企業や店舗の連絡先情報を正しく記載することは、集客やSEOにおいて非常に重要です。その連絡先情報を検索エンジンに正確に伝えるためのHTMLタグが、addressタグです。 かつてのHTMLでは、addressタグは単に文字を斜体（イタリック）にするための装飾タグとして使われることがありました。しかし、現代のHTML標
htmlタグ｜address（アドレス）連絡先・所在地情報 活用とSEO効果
ホームページ（ウェブサイト）制作において、テキストや静止画だけでなく、音声や動画といったマルチメディアコンテンツを活用することは、ユーザーに豊かな体験を提供するために非常に重要です。かつて、Webページに動画や音声を埋め込むためには、Flashなどの外部プラグインに依存する必要があり、閲覧する端末やブラウザ環境によっては再生できないという大きな課題がありまし
htmlタグ｜audio・video・source ホームページへの動画・音声の直接埋め込みと複数ファイルの指定
ホームページ（ウェブサイト）制作において、ブラウザや検索エンジンに対してページの設定情報や意味を伝えるためのmetaタグ（メタタグ）は、ユーザーの目には直接見えないものの、サイトのパフォーマンスやWebマーケティングの成果を左右する極めて重要な要素です。文字コードの指定、画面サイズの制御、検索結果に表示される説明文の定義など、ホームページ（ウェブサイト）の根
htmlタグ｜meta（メタ）・title（タイトル）
ホームページ（ウェブサイト）制作において、テキストだけでは伝わりにくい事業の魅力やサービスの内容を、視覚的に分かりやすくユーザーへ伝えるために画像は非常に重要な役割を持っています。この画像ファイルをページ内に表示させるために使用されるのが、HTMLの「img」タグです。 「img」タグは、他の多くのタグのように開始タグと終了タグでテキストを囲むのではなく、タ
htmlタグ｜img（イメージ・画像）
ホームページ（ウェブサイト）制作において、ページ内の各コンテンツが「どのような意味や役割を持っているのか」を検索エンジンやブラウザに正しく伝えることは非常に重要です。かつてのHTMLでは、ページのヘッダー部分やフッター部分、あるいは記事のまとまりなどをすべて「div」タグで囲み、CSSのクラス名で役割を区別していました。しかし、HTML5の規格からは、文書の
htmlタグ｜header・footer・section・main・hgroup ページの構造化タグ
これまでホームページ（ウェブサイト）を構築する言語であるHTMLの仕様は、時代とともに大きな変化を遂げてきました。かつては文書を装飾するためのタグが多く存在していましたが、現代の標準仕様であるHTML5においては、文書の構造を示すことと、デザインを装飾することが明確に切り分けられています。 この現代の仕様に合わせた<hr>タグの役割、SEOにおけ
htmlタグ｜hr（水平線）段落レベルでのテーマの区切り
ホームページ制作（ウェブサイト制作）において、難読漢字や専門用語にふりがな（ルビ）を振る機会があります。このふりがなを制御するHTMLタグ「ruby」「rt」「rp」「rb」についてのご説明です。年齢層の幅広いユーザーや特定の業界用語に馴染みのない方々に向けて情報発信する際、読みやすさを確保することは非常に重要です。 「ruby（ルビ）」タグは、ふりがなを振
htmlタグ｜ruby（ルビ）・rt・rp・rb ふりがなの設定
ホームページ（ウェブサイト）運営において、一度公開した情報を常に最新かつ正確な状態に保つことは非常に重要です。事業を取り巻く環境の変化やサービスの改定に伴い、ページ内のテキストを後から修正したり追記したりする場面は頻繁に発生します。その際、単に古い文章を消して新しい文章に書き換えるのではなく、「どこが削除され、どこが新しく追加されたのか」を明確に示すために使
htmlタグ｜ins（追加情報）・del（削除情報）・s（打ち消し線）
現在のホームページ（ウェブサイト）制作において、YouTubeの動画やGoogleマップをページ内に埋め込んで表示する場面は頻繁に発生します。このように、閲覧しているページの一部を切り取り、そこに別のHTMLドキュメント（外部ページなど）を読み込んで表示するために使用されるのが「iframe（アイフレーム：インラインフレーム）」タグです。他のコンテンツを手軽
htmlタグ｜iframe（インラインフレーム）｜frame・frameset・noframes（廃止）
ホームページ（ウェブサイト）制作において、文章内の特定の文字を斜体（イタリック）にしたり、下線（アンダーライン）を引いたりして強調する場面は頻繁に発生します。インターネットが普及し始めた当初から長らく、これらの視覚的な表現を手軽に実現するための手段として、「i」タグと「u」タグが多用されてきました。当時は、HTMLタグだけで文字の見た目を整えることが一般的で
htmlタグ｜i（イタリック）・u（アンダーライン）
ホームページ（ウェブサイト）制作において、ユーザーからの問い合わせ、資料請求、商品の購入など、事業の売上や成果（コンバージョン）に直結する非常に重要な役割を担うのが「入力フォーム」です。このフォームを構築するために中心となるHTMLタグが、「form」「input」「label」「select」「button」「textarea」です。 「form」タグは、
htmlタグ｜form・input・output・label・button・textarea｜フォーム
ホームページ（ウェブサイト）制作において、ユーザーからの問い合わせや商品の注文を受け付ける「入力フォーム」は、事業の売上や成果に直結する非常に重要な役割を持っています。この入力フォームをより使いやすく、整理された状態にするために活躍するHTMLタグが、「fieldset」と「legend」です。 「fieldset」タグは、フォーム内にある複数の入力項目（i
htmlタグ｜fieldset・legend 入力項目の整理｜keygen（廃止）
ホームページ（ウェブサイト）制作において、ページのデザインやレイアウトを構築する際、最も頻繁に使用されるHTMLタグが「div」と「span」です。これら二つのタグには、他の多くのHTMLタグ（見出しを表すhタグや、段落を表すpタグなど）とは異なる大きな特徴があります。それは、タグ自体に「特定の意味を持たない（セマンティクスを持たない）」という点です。 特定
htmlタグ｜div（汎用ブロック要素）・span（汎用インライン要素）
ホームページ（ウェブサイト）制作において、料金表や事業の比較データなど、複雑な表組みを作成する機会は数多くあります。この表組みの列を制御するHTMLタグ「colgroup」と「col」についてのご説明です。通常、表の列ごとに背景色や幅を指定する場合、一つひとつのセルに対して個別にスタイルを記述するとソースコードが肥大化し、後から修正を加える作業も非常に困難に
htmlタグ｜colgroup・col 表の列をグループ化
ホームページ（ウェブサイト）制作において、プログラミング言語のソースコードや、システムの出力結果、キーボードの入力指示などをユーザーへ正確に提示する場面があります。IT関連の事業や技術的な情報を発信するオウンドメディアでは、これらのテキストを記事内にそのまま記載することが頻繁に発生します。その際、通常の文章とは区別して、コンピューター関連の特殊なテキストであ
htmlタグ｜code・samp・kbd・var・pre｜listing（廃止）
ホームページ（ウェブサイト）制作において、ユーザーがブラウザ上で実際に目にするすべてのコンテンツを囲むbodyタグは、ページを構成するための最も土台となる要素です。HTML文書は、裏側の設定を記述するhead要素と、表側の情報を記述するbody要素という2つの大きなブロックで成り立っています。テキスト、画像、リンク、表など、ホームページ（ウェブサイト）を訪れ
htmlタグ｜body（ ボディ）文書の本体
現在のホームページ（ウェブサイト）運営において、外部の権威ある情報やデータを参照し、ユーザーに提供することは、コンテンツの説得力を高める上で非常に有効です。その際、他者の文章や著作物を自社のページ内に適切に掲載するために使用されるのが、HTMLの「blockquote」「q」「cite」といった引用タグです。 「blockquote」タグは、段落などのまとま
htmlタグ｜blockquote・q・cite（引用）
ホームページ（ウェブサイト）を制作する際、日本語や英語のように左から右へ読む言語だけで構成されている場合は、文字の方向について深く考える機会は少ないかもしれません。しかし、事業が拡大して多言語展開を見据えたり、様々な言語を使用するユーザーが自由に情報を入力できるシステムを構築したりする場面では、文字の進行方向を正確に制御する設計が重要になります。アラビア語や
htmlタグ｜bdo・bdiと文字方向（dir属性）
ホームページ（ウェブサイト）を制作する際、HTMLの構造を正しく理解し、適切なタグを使用することは非常に重要です。検索エンジンに正しくサイトの構造を伝えるSEOの観点からも、ユーザーが快適にページを閲覧できる環境を整える上でも、タグの使い分けが大きな影響を与えます。ここでは、数あるHTMLタグの中でも、リンクやパスの設定に関わる「baseタグ」と「aタグ」の
htmlタグ｜base（ベース）相対パスの基準URL指定 aタグとの違い
ホームページ（ウェブサイト）制作において、ページ内のどの部分がメインのコンテンツであり、どの部分がおまけの情報であるかを、検索エンジンやブラウザに正確に伝えることは非常に重要です。かつてのHTMLでは、これらをすべて「div」タグで囲み、クラス名だけで区別していました。しかし、HTML5以降からは文書の構造をより明確（セマンティック）にするために、「arti
htmlタグ｜article（アーティクル、記事）・aside（アサイド、補足）
ホームページ（ウェブサイト）制作において、画像を用いて直感的なナビゲーションを提供することは、ユーザーを目的のページへスムーズに誘導するために非常に重要です。通常、1つの画像に対して設定できるリンクは1つだけですが、1枚の画像の中の「複数の異なる領域」ごとに別々のリンク先を設定したい場面があります。例えば、日本地図の画像において「京都」の部分をクリックすると
htmlタグ｜map（マップ）・area（エリア）
ホームページ（ウェブサイト）制作において、ページを正しく表示し、検索エンジンに適切な情報を伝えるための第一歩となるのが、「DOCTYPE（ドキュメントタイプ）宣言」です。DOCTYPE宣言とは、そのHTML文書がどのバージョンのHTMLで記述されているかを、ブラウザや検索エンジンのクローラーに対して知らせるための重要な記述です。HTMLファイルの最も上の行（
htmlタグ｜DOCTYPE ドキュメントタイプ・html文書宣言
ホームページ（ウェブサイト）制作において、複雑な情報やデータをユーザーに分かりやすく伝えることは非常に重要です。その際に活躍するのが、表（テーブル）を作成するためのHTMLタグである「table」および関連する「tr」「th」「td」「tbody」「thead」「tfoot」タグです。 「table」タグは、表全体の枠組みを定義する大元のタグです。その中に「
htmlタグ｜table（テーブル）・tr・th・td・tbody・thead・tfoot・caption
現在のホームページ（ウェブサイト）制作において、ユーザーに提供する情報量は年々増加しています。しかし、1つのページに膨大なテキストをそのまま掲載すると、スマートフォンなどの画面が小さなデバイスでは非常に読みにくくなり、ユーザーの離脱を招く原因となります。このような課題を解決し、利便性と情報量の両立を図るために活用されるのが、HTMLの「summary」タグと
htmlタグ｜summary・details（要約と詳細）
現在のホームページ（ウェブサイト）制作において、文字の大きさを変えたり、打ち消し線を引いたり、空白を作ったりするためにHTMLタグを直接使用することは推奨されません。インターネットの普及期から2000年代にかけて、「small（文字を小さくする）」「big（文字を大きくする）」「strike（文字に打ち消し線を引く）」「center（センタリング、中央寄せ）
htmlタグ｜small｜ big・strike・spacer・center・marquee・blink（html5で廃止）
現在のホームページ（ウェブサイト）制作において、動画や音声、PDFなどの外部コンテンツをページ内に表示させる技術は大きく進化しています。かつて、これらのリッチメディアや双方向性のあるコンテンツを表示するために頻繁に使用されていたのが、HTMLの「object」「embed」「noembed」「param」「applet」といったタグです。 インターネットの普
htmlタグ｜object・embed・noembed・param・applet｜埋め込み
ホームページ（ウェブサイト）制作において、ユーザーが目的のページへ迷わずたどり着けるように案内（ナビゲーション）を整えることは、使いやすさを高める上で非常に重要です。このサイト内の案内板としての役割を検索エンジンやブラウザに正しく伝えるために使用されるのが、HTMLの「nav」タグと「menu」タグです。 「nav」タグは「navigation」の略であり、
htmlタグ｜nav（ナビ）・menu（メニュー）｜command（廃止）
ホームページ（ウェブサイト）制作において、コンテンツの階層構造を示し、ユーザーと検索エンジンの両方にページのテーマやセクションごとの要点を伝えるために使用されるh1〜h6タグ（見出しタグ）は、サイトの品質を決定づける非常に重要な要素です。 かつてのホームページ制作では、単に文字を大きくしたり太くしたりするデザインの目的で、文脈に関係なく見出しタグが使われるこ
htmlタグ｜h1～h6 見出し
ホームページ（ウェブサイト）制作において、ブラウザ上で動的なグラフィックやアニメーションを描画するために使用されるcanvasタグは、静的なページに豊かな視覚体験をもたらす非常に強力な要素です。 かつてのウェブ標準では、ブラウザ上で複雑なアニメーションやインタラクティブなコンテンツを表現するためには、Flashなどの外部プラグインに依存する必要がありました。
htmlタグ｜canvas（キャンバス）図形描画
ホームページ（ウェブサイト）制作において、ユーザーにとって読みやすい文章レイアウトを構築することは非常に重要です。パソコンやスマートフォンなど、閲覧する画面の大きさが異なる環境において、適切に改行を制御するために使用されるのが、HTMLの「br」タグや「wbr」タグです。 「br」タグは「break」の略であり、テキストの途中で強制的に改行を入れる役割を持ち
htmlタグ｜br 改行・wbr・nobr
