HTML
Webページを構成するために必要な言語のことです。
概要
HTMLというのは、Hyper Text Markup Language(ハイパーテキストマークアップランゲージ)の頭文字をとったもので、エイチ・ティー・エム・エルという言い方を一般的にします。
Webページを表示する際に、HTMLという言語(決められた文法上のルール)に則ってコードを書くことにより、正確な情報をブラウザ画面に表示することができます。
このHTMLのコードは、「タグ」というもので構成されており、それぞれのタグが文法上の役割を担っています。
例えば、pというタグがあります。pタグは一般的には「段落タグ」と呼ばれており、文章の一区切り分を構成しています。
本の小説などをイメージしていただくとわかりやすいかもしれませんが、タイトルがあり、文字や段落があり、画像があり・・・など、似通った要素が実は多いです。
他にも非常に沢山のタグがありますが、それらを組み合わせることでWebサイトのページを構成していきます。
この用語のメモ
Webに携わる仕事を行うのであれば聞かないことはまずないほど、もっとも根付いた言語です。
業務上のあらゆる場面で意識的、または無意識に関わってきます。
制作会社との打ち合わせや勉強会などでも頻繁にカリキュラムがあります。基礎の基礎ですが、コーダーとしてはもっとも大切な言語です。
Web制作を行う方にとってはまず一番初めに習得する言語のひとつとなるでしょう。
学校機関等である程度基礎知識は習得できるものの、業務になってくると求められるのは正確で且つ容量の少ないコーディング能力が要求されます。
個人的にはそんなに沢山のタグを覚える必要はなく、文章構成に必要なタグに絞って習得し、他はCSSの習得に力を入れるのがまずは近道だと思います。
関連用語
- コーディング
- 内部施策
- セマンティックウェブ
Web担当・運営・解析・SEO問題集の例題問題
HTMLに関連するジャンルの練習問題を掲載しています。Web担当・運営・解析・SEO問題集一覧から各ジャンルの問題にチャレンジできます。
クリックすると問題の答えと解説が見れます。
- tbodyタグ
- dtタグ
- thタグ
- trタグ
- tdタグ
この答えの解説
dtタグは、dl(定義リスト)タグの入れ子になります。dlタグの入れ子にdtタグとddタグを使用します。
dtタグとddタグは、「質問と答え」の関係のような人まとまりの意味を持つ表現をしたいときに使うため、Q&Aなどのサイトに多用されます。
- olタグ
- dlタグ
- pタグ
- divタグ
- ulタグ
この答えの解説
olタグは順序リストになるため、構文上の表記では時系列(順序)が記載されており、他の選択肢より適しているタグになります。
- imgタグ
- marqueeタグ
- spanタグ
- aタグ
- divタグ
この答えの解説
pタグはインラインタイプのタグなので、ブロックレベルタイプのdivタグやulタグは構文上入れ込むことができません。
- ライティング能力
- プログラミング能力
- ディレクション能力
- チェック能力
- アクセス解析能力
この答えの解説
直接関係ある作業として、ライティング能力やプログラミング能力はコンテンツ制作、チェック能力はリンク切れや文言間違いなどの品質向上、アクセス解析能力はユーザー属性やニーズの把握でそれぞれ必要です。
ディレクション能力は主に依頼主や作業メンバーへの指示、予算などがメインとなるため直接の施策業務に関わることはほとんどありません。(アドバイス程度)
- EFO
- OFO
- FUO
- LPO
- SEO
この答えの解説
エントリーフォーム対策と呼ばれるもので、Entoly Form Optimizationの頭文字をとり、EFO(対策)と呼ばれます。
コンバージョン改善を行う際に、何の要素がフォーム離脱に繋がるのかを特定し、削除や選択方法の変更を行い入力離脱を防ぐ施策を言います。
- 当社はYahoo!やGoogleの検索アルゴリズムに精通しています。
- 当社はあらゆる業界においての情報サイトを有しており、ライターを8名常駐しています。
- 当社はロングテールSEOに強く、競合他社とのSEOで勝てています。
- 当社は20名超のマークアップエンジニアを抱えています。
この答えの解説
正解の選択肢では、施策の具体性の説明がないのでブラックハットSEOを行っている可能性が高く、ペナルティを受けた場合のリカバリが非常に難しくなるため、対応方法を聞くべきです。
- TSVファイル
- Googleスプレッドシート
- Excelファイル
- CSVファイル
この答えの解説
Googleサーチコンソールのエクスポート機能で出力出来ないファイル拡張子はTSVファイルになります。
とはいえ、特段使えないからといって影響が大きいものでもないので、スプレッドシートかエクセルで使いやすい方を選択しましょう。
- PC版サイトしか作成していない場合、モバイル端末からの検索順位が下がる
- ほとんど内容が薄くてもPC版からモバイル版へのリンクを大量に張れば順位が上がる
- ほとんど内容が薄くてもモバイルサイトを別で作った方がよい
- PC版サイトを作り込んでいるのであれば、モバイル版は何もしなくても検索順位が上がる
この答えの解説
PCサイトをしっかり作っているからといって、コンテンツをモバイル版で障害なく見れるようにかつボリュームを落とさないようにしない限り、モバイル端末での検索順位向上は望みにくいと考えます。
- テキストリンクと間隔に隙間がほとんどない
- 文字と画像の割合が両極端
- テキストサイズがPC版サイズと同じで大きすぎる
- リンクの隙間がない
この答えの解説
リンクの隙間がなくても画像リンクなどのタップ範囲が広いものであれば問題視される確率は低いですが、テキストリンクで隙間がない場合は誤動作の懸念から「モバイルフレンドリー」でないと見なされる可能性があります。
その他は特に問題視される可能性は低いです。
関連タグ【Web制作】に関するよくある質問
Web制作に関するよくある質問を抜粋しています。Web制作に関するよくある質問はこちらから。
今でこそ、SEOを中心にコーディングを組むことが大半になってきているため言える話になりますが、Webサイトの一ページ一ページは「本」を作る意識を持って取り組んでいます。
ちゃんとタグにも「タイトル(表題)」や「見出し」、「段落」など、「作文」や「国語」にまつわる言葉が多く出てきますね。
Google側も同じように「記載されている内容」が「どの場面」で「どれぐらいの分量」の情報が「検索された内容に対し正確性があるか」が重要です。
コーダーやライターはその辺りを意識することが大切です。
デザイナーは、Googleよりも人間側が認知する視覚情報がもっともウエイトを占めるため、分かりやすさとトレンドをいかにストレスなくユーザーに供与できるかが大事で、ユーザーエクスペリエンスの精度に関わります。
Webサイトは、成長を前提に作ることが大事です。そういう意味では、いつまでもページが増え続ける「1巻だけの本」を作り続ける意識が必要ではないかと考えます。
製作工程に応じて使いやすいソフトが大筋決まっていることが多いです。
構成案やサイトマップを作る際はMicrosoftの「Excel」や「PowerPoint」が鉄板です。
大まかなデザイン枠を作る分にはPowerPointがあれば十分作れますし、サイトマップやスケジュール・見積もりなどの情報は、Excelがほとんど使われることが多いです。
いずれもPDFに手軽に変換できる点も非常に使いやすい要因となっています。
デザイン面では、Adobeの「Illustrator」か「Photoshop」が鉄板で、まれに「Fireworks」を使用しているユーザーもいます。
一般的に紙媒体もやっている企業では、「Illustrator」を使用してサイトデザインを制作しているケースが非常に多いです。
コーディング等ではAdobeの「Dreamweaver」がもっとも有名ですが、テキストエディタでコードを作成できる力があれば、ワードパットソフトの「Terapad」やGithubが提供している「Atom」も非常に使いやすいです。
コーディング面においてはファイルのエンコードとHTMLやCSS記載のエンコードをあわせないと文字化けも起こしてしまうので、個人的には「Terapad」が使いやすいと感じています。
運用面、特にアクセス解析などにおいてはこちらもMicrosoftの「Excel」や「PowerPoint」が非常に使われます。ツールとしては「Googleアナリティクス」と「Googleサーチコンソール」を使います。
Excelはうまく使えば得られたアクセス情報からさらに様々な視点でのアクセス情報を拾い出すこともできるため、Excelを使いこなせることができれば大きな武器になります。
アクセス解析等はディレクターが兼任しているケースも多いです。
ざっと上げましたが、全てを担当する場合は「Excel」「PowerPoint」「Illustrator」「Photoshop」「Dreamwerver」「Googleアナリティクス」「Googleサーチコンソール」の7つをマスターすることで大半の業務が行える形になります。
浅く広く習得するか、深く狭く習得するかは得手不得手で決めればよいのではと思います。
全体的な工程としては、「打ち合わせ」「納期・見積」「サイトマップ」「構成案(ワイヤフレーム)作成」「デザインカンプ」「デザイン制作」「コーディング」「校正・テスト・品質管理」「公開」「運営・運用」をトータルとした工程になります。
これだけでもかなりの工程数になるかと思います。
各工程には普通、「納期」を設定しているため、各工程が遅れてくると、他の工程のスケジュールが圧迫されてしまい、タイトなスケジュールをこなさなくてはならなくなります。
ディレクターは主に前半の「打ち合わせ」から「構成案(ワイヤフレーム)作成」までを担い、あとは品質チェックや進行管理を中心に行います。
デザイナーは「デザインカンプ」及び「デザイン制作」、コーダーは「コーディング」と「校正・テスト」をそれぞれ担う形となり、Web制作の分業化が進んだ今、ざっくりですがこういった形で業務が行われています。
関連タグ【SEO】に関するよくある質問
アクセス解析に関するよくある質問を抜粋しています。SEOに関するよくある質問はこちらから。
まずはGoogleアナリティクスとGoogleサーチコンソールを導入し、サイトに訪れる際に検索されているキーワードを探してみましょう。
次に、今展開しているコンテンツが「その検索キーワードにマッチしている内容かどうか」をしっかり精査した上でサービス説明を組み替えたり、検索されやすいキーワードを文中に文法上意味の通る状態を考慮した上で組み込むなどのてこ入れをしていきます。
クリック数、コンバージョン率、合計表示回数、平均掲載順位などの検索キーワード関連の他にGoogleにインデックスするページを増やしたり不要なURLを削除したりするツールです。
サイトの構造を精査したりサイト上に検出されたエラーを修正することにより、検索結果に画像を表示、評価の★マークをつけたり等といった検索に効果をつけることもできます。
手動による対策で下がった場合は、1つ上の質問の内容の通り、コンテンツの中身を精査してみてください。
競合が順位が上がったことにより、順位が落ちることも当然ながら多々あります。
そのような場合は、相手のコンテンツのどういった点がよさそうに感じるのか、キーワードの頻出具合はどのようになっているのか、コンテンツに厚みや面白味があるか、どの端末でも問題なく閲覧できているか、サイトが軽いか(容量が少なく済んでいるか)。
ざっと思いつくものでもこれだけあります。競合と比べて劣ってそうと思うところは1つずつ地道に改善していきましょう。SEOは一日にして成らずです。
Fetch as Google自体はGoogleサーチコンソールのアップデートによって終了してしまいました。現在では、それに変わるツールに「URL検査」というものがあります。
対象のURLを入れ込み、URLのステータスを出力してください。出力されたページの現在の状況が確認できます。
その中に「インデックス登録」という項目が選択できる場合、インデックスをリクエスト(再クロール)することができます。
リクエストしたURLは、最大2~3日くらいでインデックスされるかされないかが決定し、された場合はインデックスされた数に追加されます。
まずは、上位に来ているサイトのコンテンツをしっかり見てみましょう。
何故上位に来ているのか。答えは簡単で、競合他社のほうがその「検索結果に表示」されている内容について「説明が上手いから」とGoogleが認めているからです。
どのへんが説明が上手いのかということですが、まず文章量の多い少ないはそこまで関係ありません。
同じような情報であればどれだけ様々な視点を持って説明をしているか、という点であったり、全く同じコンテンツレベルだと感じるなら、それをGoogleが「どれだけ正確に読み込みできているか」も重要です。
アンカーリンクのつけ方も重要です。内部リンク、アンカーテキスト、前後ページの関連性など上げるとキリがありません。
やれることをやって、しばらく様子を見て、さらに改善案を考えページを成長させていく他ありません。
関連タグ【Webシステム】に関するよくある質問
Webシステムに関するよくある質問を抜粋しています。Web制作に関するよくある質問はこちらから。
「開発」に関しては、基本PHP言語を使っています。PHPはオープンソースで開発・ソースの提供されているユーザーも非常に多く、ソースをそのまま使えば動作してくれるものが大半なので気軽に開発テストを行えるのが魅力的です。
このサイトの「Googleアナリティクスレポート出力ツール」や「メールフォーム」もPHPで開発しております。
また、ちょっとした動作や出力などについてはJavascriptで動作しているものもあり、Javascriptを使う際はセットでJqueryを使い、動的なサイトを作成する際に使っています。
Wordpressを構築したい方向けをメインにお話しますと、まずは必要なファイルが何なのかを知ることが大事です。
さらに各ファイルを連結させるためのPHPコードを知ることが大事です。まずは、このあたりがどのように設置すれば表示されるのかを知ることが大事です。
記事を表示させるには、表示にかかる部分をループで処理し、特定の記事番号でアクセスされたときに呼び出されるようにプログラムを組む必要があります。
ここからは様々なソースコードの記載方法がありますので、ネット上の情報を見ながら色々試して見ると良いでしょう。
Web制作においては、基本的に適材適所において使用ツールを使い分けていますが、当サイトにおいては以下のように使っています。
デザインは「Photoshop」で一部アイコンを作るときには「Illustrator」を使用しています。
マニュアルなどの配布物は「PowerPoint」を使い、編集等を行っています。
コーディングについては「Terapad」を中心に、ときどき「Dreamwerver」を構文チェックなどに使用しています。
サーバー環境は、フリーソフトの「xampp」を使い、テストやモバイル画面のチェックも行っています。
索引から探す
- 用語集【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サイトについてのお問合せや様々な情報をこちらにまとめております。
- 新着情報・更新情報
当サイトの新着情報・更新情報はこちらから。