HTML
Webページを構成するために必要な言語のことです。
概要
HTMLというのは、Hyper Text Markup Language(ハイパーテキストマークアップランゲージ)の頭文字をとったもので、エイチ・ティー・エム・エルという言い方を一般的にします。
Webページを表示する際に、HTMLという言語(決められた文法上のルール)に則ってコードを書くことにより、正確な情報をブラウザ画面に表示することができます。
このHTMLのコードは、「タグ」というもので構成されており、それぞれのタグが文法上の役割を担っています。
例えば、pというタグがあります。pタグは一般的には「段落タグ」と呼ばれており、文章の一区切り分を構成しています。
本の小説などをイメージしていただくとわかりやすいかもしれませんが、タイトルがあり、文字や段落があり、画像があり・・・など、似通った要素が実は多いです。
他にも非常に沢山のタグがありますが、それらを組み合わせることでWebサイトのページを構成していきます。
この用語のメモ
Webに携わる仕事を行うのであれば聞かないことはまずないほど、もっとも根付いた言語です。
業務上のあらゆる場面で意識的、または無意識に関わってきます。
制作会社との打ち合わせや勉強会などでも頻繁にカリキュラムがあります。基礎の基礎ですが、コーダーとしてはもっとも大切な言語です。
Web制作を行う方にとってはまず一番初めに習得する言語のひとつとなるでしょう。
学校機関等である程度基礎知識は習得できるものの、業務になってくると求められるのは正確で且つ容量の少ないコーディング能力が要求されます。
個人的にはそんなに沢山のタグを覚える必要はなく、文章構成に必要なタグに絞って習得し、他はCSSの習得に力を入れるのがまずは近道だと思います。
関連用語
- コーディング
- 内部施策
- セマンティックウェブ
Web担当・運営・解析・SEO問題集の例題問題
HTMLに関連するジャンルの練習問題を掲載しています。Web担当・運営・解析・SEO問題集一覧から各ジャンルの問題にチャレンジできます。
クリックすると問題の答えと解説が見れます。
- headタグ
- bタグ
- aタグ
- timeタグ
- marqueeタグ
この答えの解説
headタグのみ、bodyタグ外に設置されるタグなのでページ内に表示されません。
しかし、ヘッダー情報があることによりGoogleの検索結果に表示させたりブラウザのタブにページのタイトル名を表示させたりすることができます。
また、SNSなどと連携して画像を表示させたりする機能もこのheadタグ内に様々なタグを用いて設置します。
- canvasタグ
- iframeタグ
- 不適切なものはない
- imgタグ
- buttonタグ
この答えの解説
実は全て入れ子にできるタグです。しかし、あくまで「見出しタグ」であることをきちんと理解したうえでタグを使用しましょう。
見出しなのに画像や別フレームなどが入ると構造的に非常におかしい形になってしまいます。
- olタグ
- dlタグ
- pタグ
- divタグ
- ulタグ
この答えの解説
olタグは順序リストになるため、構文上の表記では時系列(順序)が記載されており、他の選択肢より適しているタグになります。
- fetch as Googleを使う
- URL検査を使う
- sitemap.xmlを作成し、Googleサーチコンソールから読み込む
- クローリングされるまで放置する
この答えの解説
現在のGoogleサーチコンソールでは、残念ながらfetch as Googleは廃止されています。
代わりの手段としてURL検査があり、そこから「再クロール」はできますが、問題としては「公開直後のサイト」なので、sitemap.xmlをアップし、Googleにページを認識させなければ表示すらされません。
- 外部施策
- キーワード選定
- コピーコンテンツ作成
- 内部施策
- ディレクトリの見直し
この答えの解説
コピーコンテンツは、Googleのアルゴリズムガイドラインに違反する行為になります。
コピーコンテンツが多く発見された場合、低品質なコンテンツとみなされてしまいます。
- 当社はYahoo!やGoogleの検索アルゴリズムに精通しています。
- 当社はあらゆる業界においての情報サイトを有しており、ライターを8名常駐しています。
- 当社はロングテールSEOに強く、競合他社とのSEOで勝てています。
- 当社は20名超のマークアップエンジニアを抱えています。
この答えの解説
正解の選択肢では、施策の具体性の説明がないのでブラックハットSEOを行っている可能性が高く、ペナルティを受けた場合のリカバリが非常に難しくなるため、対応方法を聞くべきです。
- Googleにキャッシュ登録され、検索結果にAMP枠にてページが表示される
- スマートフォンでアクセスすると表示が単純化される
- スマートフォンでアクセスが多いサイトを選んで表示される
- Googleにキャッシュ登録され、Googleの検索リソースを消費させる
この答えの解説
AMPは、クロールされるとGoogleにキャッシュ登録され、検索画面に「雷マークのついた」アイコンが表示されます。
また、ニュースカルーセル欄に一覧が表示され、検索上位に入らないページでも目立つ箇所に表示されるため、SEO内部施策のひとつとしてAMP化の実装は行われ続けています。
- どんな検索ワードでどれくらい検索結果に表示されどれだけクリックされたかがわかる
- あらかじめ決められた検索ワードのうち一つの検索結果でどれだけクリックされたかがわかる
- あらかじめ決められた検索ワードで表示された検索結果でどれだけクリックされたかがわかる
- どんな検索ワードでどんな風に検索結果に表示されどれだけクリックされたかがわかる
この答えの解説
サーチコンソール上では、「どんな検索ワード」で「どれくらい検索結果に表示」され「どれだけクリックされた」かがグラフ上で視覚的にわかるツールになります。
- Googleと提携してWebページを検索結果に表示すること
- 自サイトのデータベースにGoogleのデータベースが紐づくこと
- Google側のデータベースに自サイトのページ情報が登録されること
- Google側に自サイトのindex.htmlファイルが登録されること
この答えの解説
Webページがインデックスされると、Google側の検索エンジンデータベースに自サイトのページ情報が登録されます。
これにより、検索結果に表示されるようになる仕組みです。
そのデータベース内にある様々な情報のうち、「ある検索キーワード」と「内容がマッチしている順」に検索結果に表示されます。
関連タグ【Web制作】に関するよくある質問
Web制作に関するよくある質問を抜粋しています。Web制作に関するよくある質問はこちらから。
Webサイトの制作は、現在では分業化が当たり前になってきているため全てを習得しなければいけない訳ではありません。
そのため、デザインからやらないとダメ、コーディングからやらないとダメ、というのはなく、覚える順番は任意で決めてもらって問題ありません。
ことWebに関して言えば、覚えるというよりかは「盗んでいく」というスタイルが、覚える作業としては適切ではないかと思います。
今でこそ、SEOを中心にコーディングを組むことが大半になってきているため言える話になりますが、Webサイトの一ページ一ページは「本」を作る意識を持って取り組んでいます。
ちゃんとタグにも「タイトル(表題)」や「見出し」、「段落」など、「作文」や「国語」にまつわる言葉が多く出てきますね。
Google側も同じように「記載されている内容」が「どの場面」で「どれぐらいの分量」の情報が「検索された内容に対し正確性があるか」が重要です。
コーダーやライターはその辺りを意識することが大切です。
デザイナーは、Googleよりも人間側が認知する視覚情報がもっともウエイトを占めるため、分かりやすさとトレンドをいかにストレスなくユーザーに供与できるかが大事で、ユーザーエクスペリエンスの精度に関わります。
Webサイトは、成長を前提に作ることが大事です。そういう意味では、いつまでもページが増え続ける「1巻だけの本」を作り続ける意識が必要ではないかと考えます。
何より少ない容量で「ある程度の動的動作」や「サイトの整形」が出来る点だと思います。
また、手軽にスマホサイト対応ができる「メディアクエリ」が使用できるのも大きな利点で、こんにちのモバイル対応を支えているものになります。
CSSは、手段を覚えておけば覚えておくほど、レイアウトの調整手段が増えてくるため、容量を抑えつつ動作を行えるソースが作れます。
関連タグ【SEO】に関するよくある質問
アクセス解析に関するよくある質問を抜粋しています。SEOに関するよくある質問はこちらから。
まずはGoogleアナリティクスとGoogleサーチコンソールを導入し、サイトに訪れる際に検索されているキーワードを探してみましょう。
次に、今展開しているコンテンツが「その検索キーワードにマッチしている内容かどうか」をしっかり精査した上でサービス説明を組み替えたり、検索されやすいキーワードを文中に文法上意味の通る状態を考慮した上で組み込むなどのてこ入れをしていきます。
Googleから何らかのガイドライン違反が判明したときに、検索順位を落としたり、検索結果から除外する処置が取られます。
コンテンツに問題がある場合は内容を改めて精査し、修正を直ちに行う必要があります。(大量のコピーコンテンツがある、他サイトにある文言がそのままほぼ全てコピーされている)
しかし、中には不正に何者かが大量のスパムリンクを勝手に張られていることによって著しく品質が意図せず落ちていることもあるため、被リンクチェックは日ごろから行うことをオススメします。
クリック数、コンバージョン率、合計表示回数、平均掲載順位などの検索キーワード関連の他にGoogleにインデックスするページを増やしたり不要なURLを削除したりするツールです。
サイトの構造を精査したりサイト上に検出されたエラーを修正することにより、検索結果に画像を表示、評価の★マークをつけたり等といった検索に効果をつけることもできます。
まずは、上位に来ているサイトのコンテンツをしっかり見てみましょう。
何故上位に来ているのか。答えは簡単で、競合他社のほうがその「検索結果に表示」されている内容について「説明が上手いから」とGoogleが認めているからです。
どのへんが説明が上手いのかということですが、まず文章量の多い少ないはそこまで関係ありません。
同じような情報であればどれだけ様々な視点を持って説明をしているか、という点であったり、全く同じコンテンツレベルだと感じるなら、それをGoogleが「どれだけ正確に読み込みできているか」も重要です。
アンカーリンクのつけ方も重要です。内部リンク、アンカーテキスト、前後ページの関連性など上げるとキリがありません。
やれることをやって、しばらく様子を見て、さらに改善案を考えページを成長させていく他ありません。
手動による対策で下がった場合は、1つ上の質問の内容の通り、コンテンツの中身を精査してみてください。
競合が順位が上がったことにより、順位が落ちることも当然ながら多々あります。
そのような場合は、相手のコンテンツのどういった点がよさそうに感じるのか、キーワードの頻出具合はどのようになっているのか、コンテンツに厚みや面白味があるか、どの端末でも問題なく閲覧できているか、サイトが軽いか(容量が少なく済んでいるか)。
ざっと思いつくものでもこれだけあります。競合と比べて劣ってそうと思うところは1つずつ地道に改善していきましょう。SEOは一日にして成らずです。
関連タグ【Webシステム】に関するよくある質問
Webシステムに関するよくある質問を抜粋しています。Web制作に関するよくある質問はこちらから。
「開発」に関しては、基本PHP言語を使っています。PHPはオープンソースで開発・ソースの提供されているユーザーも非常に多く、ソースをそのまま使えば動作してくれるものが大半なので気軽に開発テストを行えるのが魅力的です。
このサイトの「Googleアナリティクスレポート出力ツール」や「メールフォーム」もPHPで開発しております。
また、ちょっとした動作や出力などについてはJavascriptで動作しているものもあり、Javascriptを使う際はセットでJqueryを使い、動的なサイトを作成する際に使っています。
あまり自分自身でコードを組むことは行っていません。
javascriptはあらゆるサイトに動作別でたくさんソースコードが公開されているのでそれらをアレンジして自分流に組むことが多いです。
組んだのに動かないこともたくさんあり、その場合は1行ずつ面倒でも検証し続けることで、記載ミスを見つけて動かすことができているのでいきなりイチから全部組まないとダメ!ということではありません。
制作現場でも自身で組んでいるコーダーももちろんいらっしゃいますが、サイトからソースを抽出することが多いです。
Wordpressはオープンソース型のブログサイト構築アプリのことで、これを使うことで「好きなデザイン」で「固定ページ」や「記事」を特段HTMLを知らなくても一般的なブログサービスのように構築できるアプリです。
企業サイトでも非常に普及しており、一般事務職の方々が「新着情報」を更新し続けることもごく当たり前になりました。
このWordpressで特に求められるのは、アプリ導入から構築するところまでが必要で、その構築費用にかなりの初期費用を投資する必要があります。
索引から探す
- 用語集【A-Z一覧】
Web制作・運営・解析・SEO用語集のAからZまでで出てくる用語一覧をまとめています。
- 用語集【あ行一覧】
Web制作・運営・解析・SEO用語集の「あ行」で出てくる用語一覧をまとめています。
- 用語集【か行一覧】
Web制作・運営・解析・SEO用語集の「か行」で出てくる用語一覧をまとめています。
- 用語集【さ行一覧】
Web制作・運営・解析・SEO用語集の「さ行」で出てくる用語一覧をまとめています。
- 用語集【た行一覧】
Web制作・運営・解析・SEO用語集の「た行」で出てくる用語一覧をまとめています。
- 用語集【な行一覧】
Web制作・運営・解析・SEO用語集の「な行」で出てくる用語一覧をまとめています。
- 用語集【は行一覧】
Web制作・運営・解析・SEO用語集の「は行」で出てくる用語一覧をまとめています。
- 用語集【ま行一覧】
Web制作・運営・解析・SEO用語集の「ま行」で出てくる用語一覧をまとめています。
- 用語集【や行一覧】
Web制作・運営・解析・SEO用語集の「や行」で出てくる用語一覧をまとめています。
- 用語集【ら行一覧】
Web制作・運営・解析・SEO用語集の「ら行」で出てくる用語一覧をまとめています。
- 用語集【わ行一覧】
Web制作・運営・解析・SEO用語集の「わ行」で出てくる用語一覧をまとめています。
タグから探す
- タグ【Web制作】
Web制作・運営・解析・SEO用語集に登録されているタグ【Web制作】一覧をまとめています。
- タグ【Webシステム】
Web制作・運営・解析・SEO用語集に登録されているタグ【Webシステム】一覧をまとめています。
- タグ【SEO】
Web制作・運営・解析・SEO用語集に登録されているタグ【SEO】一覧をまとめています。
- タグ【SEM】
Web制作・運営・解析・SEO用語集に登録されているタグ【SEM】一覧をまとめています。
- タグ【アクセス解析】
Web制作・運営・解析・SEO用語集に登録されているタグ【アクセス解析】一覧をまとめています。
- タグ【広告】
Web制作・運営・解析・SEO用語集に登録されているタグ【広告】一覧をまとめています。
- タグ【マーケティング】
Web制作・運営・解析・SEO用語集に登録されているタグ【マーケティング】一覧をまとめています。
よくアクセスされている用語
- HTML
Webページを構成するために必要な言語のことです。 - PPC
クリックすることで課金される広告のことです。 - コーディング
HTMLやPHPなどのソースコードの記述を行うこと、またはその人員のことをいいます。 - 直帰率
初めてサイトに訪れたページでサイト内の他のページへ行かずにサイトから離脱した割合のことをいいます。 - ページビュー
Webサイトのページを表示された数のことをいいます。 - レスポンシブデザイン
一つのページ(URL)で使用OSや画面、ブラウザを問わず閲覧をサポートしているデザインをいいます。
その他カテゴリー
- GAレポート作成ツール
面倒なアクセス解析レポート作りはもうやめよう!
- Web担当者問題集
GoogleアナリティクスやSEOに関する問題集を作っています。
- Web運営用語集
Webや解析などでよく使う単語辞典ページを用意いたしました!
- よくあるご質問
よくいただくお問い合わせ内容の一覧になります。
- お問合せ・情報
当Webサイトについてのお問合せや様々な情報をこちらにまとめております。
- 新着情報・更新情報
当サイトの新着情報・更新情報はこちらから。