HTML

HTMLで略語を表現する方法 – abbr【初心者向け】

HTMLの初心者向けに、略語を表現する方法を解説した記事です。【abbrタグ】をtitleタグと使うことで、正式名称も表記できます。名前を特記する【citeタグ】、住所表現の【addressタグ】も合わせて説明。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。

今回は、HTMLの略語・名前の特記・住所表現 について解説します。

そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

今回は、HTMLに関する内容だね！

どういう内容でしょうか？

略語を表現する方法について詳しく説明していくね！

お願いします！

略語・名前の特記・住所表現

・略語 abbreviation <abbr>〜</abbr>

主にtitleタグと共に使われ、abbrタグで囲まれた部分が略語であることを指示します。

略語の正式名称はtitleタグで表記しましょう。

<abbr title=”Hypertext Markup Language”>HTML</abbr>を学ぼう

abbrタグ

見た目は変わりありませんが、HTMLの部分にカーソルを重ねるとtitleで入力したものが表示されます。titleタグは文書にタイトルをつけ、検索エンジンの検索結果に反映させる大事なタグですが、abbrタグ以外にも、タグの補足情報を付け加える場合に使われます。

略語ってたくさんあると思うんですけど、全部に書くんですか？

必ずしもabbrタグで囲む必要はないけど、読者になじみの無い略語を使う場合は使用が推奨されているね。

なじみが無いっていわれても～。例えば、どんなのがありますか？

専門用語で書かれた仕様書とか、もっとくだけた感じではフォトショップをフォトショのような感じで略する場合に使ってもいいかもね。

・名前を特記する cite <cite>〜</cite>

cite：引用する、引き合いに出すという意味から、映画・本・新聞・サイトなど作品のタイトル名を表記する際に使われます。

映画<cite>The Imitation Game</cite>はコンピューター科学の祖であるアラン・チューリングの物語です。

citeタグは人物名などにも使われていましたが、最新バージョンのHTML5では、作品のタイトル名に使われることが推奨されています。

・住所の表現 address <address>〜</address>

住所や連絡先、問い合わせ情報を表示する際に使われます。

<address>東京都渋谷区恵比寿1-25-1 NAGAHAMAビル5F</adress>

addressタグ

addressタグで囲った部分が斜体になりました。

citeダグや、addressタグまたはemタグも、ブラウザ上で表示される見た目は同じですが、HTML上ではそれぞれのタグで囲まれた語句は意味合いが異なるものとして認識されます。タグを正しく使い分けることでサイトのつくりが整理されると、コンピューターが認識しやすい質の高いサイトとみなされやすくなります。

適切なタグを使って整理されたページは、ページの価値が高くなるということを覚えておきましょう。

今回の記事は以上です。

さらにHTMLを学びたい場合は、HTMLで強調タグと区切り線を使う方法も合わせてご覧ください。

citeタグやaddressタグの使いどころってわかりづらいんですけど！

大切なのは自分のサイトやページに適しているかどうかだよ。

自分のサイトやページ？

例えば企業サイトだとaddressタグは必須だよね。自分のサイトが何かの作品の紹介を多用しているならciteタグも重要になります。

なるほど！

TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

Expressを使ってHTMLを表示する方法を現役エンジニアが解説【初心者向け】

Expressを使ってHTMLを表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

HTML

HTMLでword-wrapプロパティで単語を改行する方法を現役デザイナーが解説【初心者向け】

HTMLでword-wrapプロパティで単語を改行する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説し...

HTML

HTMLで丸数字を書く方法を現役エンジニアが解説【初心者向け】

HTMLで丸数字を書く方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも、HTML...

HTML

HTMLタグ内でCSSが適用される優先順位を現役デザイナーが解説【初心者向け】

HTMLタグ内でCSSが適用される優先順位について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そ...

HTML

bタグとstrongタグの書き方！HTMLで文字を太字にする方法【初心者向け】現役Webデザイナーが解説

HTMLで強調したい部分に使われるタグとして太字やイタリックなど様々あります。その中でも今回は太字について紹介します。 bタグとstrongタグを...

HTML

HTMLでhref属性の使い方を現役エンジニアが解説【初心者向け】

HTMLでhref属性の使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも、HT...

HTML

あわせてよく読まれている記事

HTML5でacronymタグの代わりにabbrタグを使って略語を表す方法を現役エンジニアが解説【初心者向け】

HTML5でacronymタグの代わりにabbrタグを使って略語を表す方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも、HTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 acronymタグの代わりにabbrタグを使って略語を表す方法について詳しく説明していくね！大石ゆかりお願いします！目次 acronymタグとは abbrタグとは活用場面 abbrタグを使ってみようまとめ acronymタグとは acronymタグは略語を表す要素です。HTML5では廃止されているため使用できません。acronymタグについて、詳しくは以下の記事も参考にしてください。 MDN – <acronym> [PR] Webデザインで副業する方法とはabbrタグとは acronymタグの代わりに使用されるのがabbrタグです。abbrタグは略語や頭字語を表します。abbrタグの記述方法は以下のようになります。 <abbr title="正式名称">略語</abbr> abbrタグについて、詳しくは以下の記事も参考にしてください。 MDN – <abbr>：略語要素活用場面それぞれの専門分野では略語が多く使われています。例えばCSSは「Cascading Style Sheets」の略です。略語は慣れてくれば分かりやすい反面、専門外の人や初心者にとってはとっつきづらいものです。そのような略語をWebページに書く場合、abbrタグを利用することで、ユーザーに配慮した記事にすることができるでしょう。 abbrタグは読み上げソフトにも対応しており、積極的に利用したいタグの1つです。 abbrタグを使ってみよう今回のサンプルプログラムではabbrタグの使い方について確認します。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sample</title> </head> <body> Webページは<abbr title="Hyper Text Markup Languate">HTML</abbr>と <abbr title="Cascading Style Sheets">CSS</abbr>で作成されます。 </body> </html> 実行結果は以下のようになります。略語の上にマウスカーソルを乗せるとtitle属性で指定した正式名称が表示されます。まとめ今回の記事ではHTML5でacronymタグの代わりにabbrタグを使って略語を表す方法について学習しました。監修してくれたメンター太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。開発実績：画像認識技術を活用した駐車場混雑状況把握、音声認識を活用したヘルプデスク支援システム、ロボットアプリの開発、大規模基幹系システムの開発・導入マネジメント。著書「知識ゼロからの機械学習入門（技術評論社）」。地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

HTML

HTMLでaddressタグを使って連絡先を表示する方法を現役エンジニアが解説【初心者向け】

HTMLでaddressタグを使って連絡先を表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 addressタグを使って連絡先を表示する方法について詳しく説明していくね！大石ゆかりお願いします！ addressタグとは <address>タグはページとはそのサイトに書いてある連絡先情報を示すときに使います。例えば以下のような情報を記載するときにadressタグを利用します。作者の名前メールアドレス住所電話番号ファックス番号フォームへのリンクなどです。書き方としては下記のようになります。 <address> 煌　タロウ<br> Email:kirameki@hoge.jp </address> 開始タグと閉じタグの中にそのサイトやページの作者に対する情報を入れることで、ここにそのサイトやページの作者の連絡先情報が書かれている、ということを表します。 addressタグの注意点 adressタグを利用する際の注意点は3つです。連絡先に関係のない情報は入れない addressタグのフォント初期値はイタリック addressタグの位置には意味があるのでご注意をあくまでも「サイトやページを作った人」だけの住所を記載する詳しく解説していきます。連絡先に関係のない情報は入れないサイトの更新日や、文書のテキストや連絡先に関係のない画像などはaddressタグの本来持つ意味とは全く違うものとなりますので、入れないようにしましょう。 addressタグのフォント初期値はイタリック Internet Explorerなどのブラウザで見る場合、初期値では斜体文字（イタリック体）で表示されることがあります。変更したいときはスタイルを当ててあげることで変更することができます。 addressタグの位置には意味があるのでご注意を基本的にaddressタグは、サイトやページ・文書の末尾に1つだけ使用されることが多いですが、どこに何回使用しても問題ありません。ですが、article要素の中に配置されている場合には、直近の祖先要素となるarticle要素に書かれた内容の作者への連絡先を示すことになるので、サイト全体の連絡先を示したい場合は少しタグを記述する場所に注意する必要があります。あくまでも「サイトやページを作った人」だけの住所を記載する addressタグはそのサイトや文書を作成した人たちのの連絡先を表示する要素です。例えば、ページ内で紹介した店の情報（住所や電話番号）を記述してはいけません。 [PR] Webデザインで副業する方法とはaddressタグを使って連絡先を表示してみようでは、実際にaddressタグを使った記述をしてみましょう。コード <p>ご意見ご感想は下記までお送りください。</p> <address> 名前：煌　タロウ<br> Mail: kirameki@hoge.jp<br> URL: https://techacademy.jp </address> 結果ご意見ご感想は下記までお送りください。名前：煌　タロウ Mail: kirameki@hoge.jp URL: https://techacademy.jp とても簡単で使いやすいのでぜひ試してみてください。監修してくれたメンターメンター増田直子 40歳直前までHTMLの存在すら知らなかったのですが、現在はWordPressを中心としたwebデザイン/コーディングをしているフリーランサーです。趣味はスキューバーダイビング・年間3度は海のある国内外へ旅行してます。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

HTML

HTMLで引用タグを使う方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。今回は、HTMLで引用タグを使う方法について解説します。そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。なお、今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介引用タグを使う方法について詳しく説明していくね！大石ゆかりお願いします！引用タグの種類 HTMLでは、引用文であることを明示するために「引用タグ」を使うことがあります。いくつか方法があるので、その方法を覚えておきましょう。・まとめて引用する blockquote <blockquote>〜</blockquote> 長い文章をまとめて引用したいときにつかいます。・一部を引用する quote <q>〜</q> 文の一部や短い文章を引用したいときにつかいます。・引用元を表記する cite 引用した文章がどこから引用したものであるかを示します。大石ゆかり引用元のアドレスって書かなければだめなんでしょうか？田島悠介引用した場合は、やっぱり引用元を書かないとだめだよ。著作権にも関わってくるし。大石ゆかりあー！そうですね。他の人が書いた内容だったの忘れてました。田島悠介著作権もあるけど、実はまだ理由があるんだ。くわしくはページ最下部で！引用タグの書き方どんな種類があるかわかったら、例をもとに書いていきましょう。まずは、<blockquote>タグです。 <blockquote> <p>インターネットによって時間と場所の制約から解き放たれたように、プログラミングを普及させることで個の選択肢、可能性をもっと伸ばせるはず。プログラミング教育を通じて世界を豊かに。それが私達のミッションです。</p></blockquote> <blockquote>タグは長い文章をそのまままとめて引用する際に使います。ブラウザ上では上下の余白とインデント（字下げ）が表示され、引用であることが示されました。続いて、一部を引用する<q>タグです。 <p>ある人は言いました。<q>何もしなければ、何も起こらない</q></p> qタグで囲んだ部分がかぎ括弧によって表示されました。なお、以前はqタグで書くと、全て「” ”（ダブルコーテーション）」で表示されていましたが、最近では日本語に対応してかぎ括弧で表示されるようになりました。このサンプルコードのように、言語を<html lang=”ja”>とすると、かぎ括弧（）で表示されます。また、<blockquote>タグも<q>タグも、cite属性を付け加えることによって出典先や引用元を指定することができます。例えばこのように書きます。 <blockquote cite=”https://www.kiramex.com/service/”> このとき、cite属性で記述した引用元はブラウザ上には反映されません。ただ、引用元が記録されているとWebページを管理するときに参考になるので、何かを引用する際にはぜひcite属性をつかって引用元のURLを記述しておきましょう。今回はHTMLで引用タグを使う方法をご紹介しました。 HTMLの基礎をさらに学びたい場合は、HTMLでリストを使う方法も合わせてご覧ください。大石ゆかりあの～！引用タグって必要なんでしょうか？田島悠介それは、どういうこと？大石ゆかり a(アンカータグ)でリンクを張って、テキストで引用ですって書いても、引用文だってわかってもらえますよね？田島悠介ただ、それだと検索エンジンにはわからないよね。引用タグって言うけれど、重複ではないよって意味もあるんだよ。大石ゆかりなるほど！重複だと思われたら、検索エンジンからペナルティがあるかもしれないですもんね！ TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

HTML

HTMLでdfn要素を使って用語を定義する方法を現役エンジニアが解説【初心者向け】

HTMLでdfn要素を使って用語を定義する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 dfn要素を使って用語を定義する方法について詳しく説明していくね！大石ゆかりお願いします！目次 dfnで用語を説明するには（用語定義について） dfn要素とは dfn要素を使って用語を定義してみよう dfnで用語を説明するには（用語定義について）文章に使用される予定の用語を定義するためにdefinition（ディフィニション）の略語であるdfnタグを使用できます。略語や語源を説明するための文書や用字用語を扱われているWebサイトでは、頻繁に活用されることが期待できます。 [PR] Webデザインで副業する方法とはdfn要素とは単純に用語や略語を定義するために用意されています。dfnタグとabbrタグのtitle属性を用いて、言語と略語の説明文も定義できます。以下に、使用例としてのサンプルコードを掲載していますので、参考までに留めておきましょう。 HTML <p>この文書には、<dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn>を用いて、dfnタグの説明が掲載されてあります。</p> 表示結果 See the Pen 2020-07-15-sample01 by YOHEI INAI (@yohei_inai) on CodePen. dfn要素を使って用語を定義してみよう dfnタグのtitle属性の値に用語を定めてから、略語を用いて説明を述べることもできます。以下に、使用例としてのサンプルコードを掲載していますので、参考までに留めておきましょう。例文のHTML <article> <section> <h2>KGI</h2> <p><dfn title="Key Goal Indicator">KGI</dfn>とは、会社の『重要目標達成指標』です。会社の事業が目指す売上高や利益、そして、利潤も含めてから、数字や文章にて目標に定めて持続化させるための指標として扱われています。</p> </section> <section> <h2>KPI</h2> <p><dfn title="Key Performance Indicator">KPI</dfn>とは、会社の『重要業績評価指標』です。KGIを達成するためにも、具体的な業務（実務）を構成して、その過程（プロセス）や行為に生じる数字や、それの反復によって関係性のある結果などが指標として扱われています。</p> </section> </article> 表示結果 See the Pen 2020-07-16-sample01 by YOHEI INAI (@yohei_inai) on CodePen. 監修してくれたメンター井内洋平 TechAcademyの現役メンター。元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

HTML

まずはここから！HTMLの書き方【初心者向け】現役デザイナーが解説

本記事では、HTMLの具体的な書き方について、初心者向けに現役エンジニアが解説していきます。本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。目次略語・名前の特記・住所表現そもそもHTMLの記述方法がわからない場合は、 HTMLについて解説した記事を読むとさらに理解が深まります。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 HTMLの書き方について詳しく説明していくね！大石ゆかりお願いします！【動画でも解説しています。クリックで見る！】 HTMLタグの書き方 HTMLはWebページに表示したい情報に対し、マークアップするための文章構成を表現する言葉です。たとえば、タイトルや見出し、本文といった区切りをHTMLでは記述できます。 HTMLはタグ＜＞で囲ったまとまりで、文章構成を表現することが可能です。タグの中には、どのような種類の文章なのかを示す要素名を記述しましょう。題名であれば<title>、見出しであれば<h1>、段落であれば<p>などです。 <title> のように要素名から始まるタグは開始タグと呼ばれます。 </title> のように、スラッシュ要素名で始まるタグは終了タグを意味し、要素の記述終了を示すものです。開始タグと終了タグで囲むことで、開始と終了を表現します。開始タグから終了タグまでのひとまとまりを要素と呼びます。図の<title>要素はWebページの題名を示すタグであり、この場合、Webページの題名は「タイトル」になります。要素とは HTML要素には、現在100を超える種類があります。 Webページで表現したい内容によって適切な要素を選び、タグで囲わなければなりません。代表的なものをいくつかみていきましょう。 <p> – 段落 paragraph（パラグラフ、段落）の略です。改行のない文章のひとかたまりを示すために使用します。文章を改行したいときは、改行のタイミングごとに複数のp要素を作ることで改行が可能です。 <h1>要素 headline（ヘッドライン、見出し）の略です。以下のように見出しの大小を表現するために使用します。大見出しはh2 中見出しはh3 小見出しはh4 <a>要素 anchor link （アンカーリンク、リンクの起点）の略です。他のHTMLなどへのリンクを表現するために使用します。青文字でアンダーラインのあるリンクの見た目になります。 <div>要素 division （ディビジョン、仕切り）の略です。四角い枠を作って、様々な要素をひとまとめにします。 <img>要素 image（画像）のことです。画像ファイルを指定し、画像を埋め込みます。 image要素を始めとするいくつかの要素は、開始タグのみで動作し、終了タグは必要ありません。 <meta>要素 meta（大局的な情報）のことです。 Webページの全体的な設定をします。文字の種類や検索エンジンの検索結果に表示される文章など、様々な項目があります。 [PR] Webデザインで副業する方法とは属性と値各要素の細かい動きや働きを設定するための付属情報が属性です。何の設定かを示すものが属性名、どう設定するかを属性値といいます。開始タグの＜＞の中、要素名の後にスペースを空けて、属性名=”属性値” の形で記述します。上記はmeta要素と呼ばれるWebページ全体の設定をするタグです。 charset （キャラクターセット= 文字の種類）をUTF-8という種類の文字に設定しています。この要素ではこの属性が必要といったように、要素と属性はセットのものが多い傾向です。たとえば、以下のように記述したうえでTechAcademyという文字をクリックするとtechacademy.jpに飛ぶリンクになります。 <a href="https://techacademy.jp/">TechAcademy</a> <a>要素のリンク先URLを、href (ハイパーテキストリファレンス= HTMLの参照先)という属性に設定しています。以下の記述は、<img>要素で表示するファイルをsrc（ソース = 情報の源泉）という属性に設定しているものです。 <img src="/image.png"> 田島悠介要素と属性、ぜひ組み合わせて理解してくださいね！大石ゆかりタグは全部覚えなければダメなんですか？田島悠介要素は覚える必要はありません。文法はHTMLを書きながら体で覚えましょう。各要素は、辞書のようなサイトや本で、調べながら読み書きできれば問題ありません。常に調べながら書いていますよ。大石ゆかり今回のタグは、後で覚えてもいいんですね？田島悠介技術は常に移り変わるので、すぐに古くなってしまうためですね。暗記するよりも、調べ方をマスターして、常に最新の技術を探るのがおすすめです。大石ゆかり調べるときはテックアカデミーの記事を参考にしますね！ HTMLを書いてみようこれまでの書き方を踏まえて、実際にコードを書いてみます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTMLの書き方</title> </head> <body> <h1>HTMLの書き方</h1> <p>はじめてのHTMLを作りました</p> </body> </html> 以下ではサンプルコードを解説していきます。 <!DOCTYPE html>はHTMLを示すもの文頭にある<!DOCTYPE html>は、文章がHTMLであることを示しています。この記述がなければ、WebブラウザがWebページとして表示できないため必要です。 HTMLの種類によっていくつか書き方のバリエーションはあるものの、今は<!DOCTYPE html>が基本です。要素の階層構造要素は、開始タグと終了タグの間に、テキストと他の要素を含めることができます。以下の例では<body>要素内に<h1>要素と<p>要素を含むものです。 <body> <h1>HTMLの書き方</h1> <p>はじめてのHTMLを作りました</p> </body> また、以下のように、要素の中に要素を入れる段階構造を入れ子といいます。 HTMLは、様々な要素を入れ子にしていくことでWebページを構成しています。 <head>と<body> <html>の中身は大きく

HTML

今さら聞けない！HTMLとは【初心者向け】

この記事は、Webページの仕組みである「HTML」とは何かを説明します。名前は聞いたことがあるけど、HTMLって何なんだろう Web制作って、いったい何を作っているんだろう Webページは、どういう仕組みで動いているんだろうこんな疑問を持っている方は、ぜひこの記事を読んでみてください。どういう仕組みでWebページができているのか理解できますよ。本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。目次略語・名前の特記・住所表現そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 HTMLとは何かについて詳しく説明していくね！大石ゆかりお願いします！【動画でも解説しています。クリックで見る！】 HTMLとは HTMLとは、ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）の略。簡単にいうと、コンピュータが理解できる、マークアップをするための言葉です。マークアップとは、もともと雑誌や新聞の編集用語で、文章構成の指示のことを指します。「この文章はタイトルです」「この3つの文章が1セットで記事です」というような、注釈のようなものですね。 Web制作では、ホームページ上に表示をしたい文章や写真などの情報に対し、HTMLという言葉で、コンピュータに文章構成を指示することから始まります。例えば、このような情報をホームページにしたいと思います。ニュース孫が生まれて、ついにおじいちゃんになりました。この情報に対して、日本語で文章構成を指示してみます。 <ここから見出し>ニュース<ここまで見出し> <ここから本文>孫が生まれて、ついにおじいちゃんになりました。<ここまで本文> これを、HTMLを使ってマークアップすると、このようになります。 <h1>ニュース</h1> <p>孫が生まれて、ついにおじいちゃんになりました。</p> HTMLという言葉を使うと、<h1>～</h1>で囲まれているのが見出し、<p>～</p>で囲まれているのが本文、という文章構成を、コンピュータが理解できるんです。このHTMLを表示するときは、<h1>や<p>は見えませんが、<h1>に囲まれている見出しは大きい文字に、<p>に囲まれている本文は小さめの文字になります。ホームページを作る際、まずはHTMLを使って文章構成の指示を出すことで、ホームページに表示したい情報を形作っていくんですね。 Webページの裏側を見る普段から私たちがブラウザで見ているWebも、裏側はHTMLでできています。実際に見てみましょう、HTMLがどんな言葉なのか、より分かってくると思います。たとえば、テックアカデミーのWebページも、裏側はHTMLです。 Webページを表示したら、画面を右クリックをし、「ページのソースを表示」を押してみましょう。すると、英単語と記号が組み合わさった文章が出てきます。これが、Webページの裏側にある、HTMLで記述された文章。 ChromeやSafariといったWebブラウザがこのHTML文章を読み、Webページをどのように表示するか判断しているのです。 HTMLのような言葉を使って、英単語や記号を組み合わせて書いた、コンピュータが読める文章を、「コード」や「ソースコード」と言います。 Webページは、どのようなWebページにするか、HTMLなどのコードを書いて指示を出して作っていきます。どのようなWebページでも、裏側のソースコードを表示することができますので、ぜひ試してみてくださいね。 [PR] Webデザインで副業する方法とはHyper Text Link（ハイパーテキストリンク） HTMLがハイパーテキスト・マークアップ・ランゲージの略、ではハイパーテキストって何でしょう？ハイパーテキストとは、ハイパーな文章、つまり文章を超えた文章のことです・・・といってもよくわかりませんよね。インターネットが生まれる前、コンピュータは、学者が論文など、文章を共有するために使われていたのです。そんな中、この共有された多数の文章が、お互いに関連付けられてリンクすることで、情報が無数に広がる。「文章がリンクする」ことで、文章を超えるという仕組み、Hyper Text Link（ハイパーテキストリンク）を考えだしました。ハイパーテキストリンクでできたつながりは、蜘蛛の巣のように複雑に広がっていくので、Web（蜘蛛の巣）と呼びます。 Webを世界中につなげよう、というプロジェクトが、WWWやW3と示されている、ワールドワイドウェブ（World Wide Web）です。今でもURLの先頭にhtpps://www.xxxxx.com のように、wwwをつけていることもありますよね。 HTMLは、ハイパーテキストリンクを実現するための、文章同士のリンクをマークアップすることができる言葉として生まれ、ワールドワイドウェブとともに育ちました。いまや世界中がWebでつながり、どこにいても瞬時に様々なWebページを見ることができます。 Webの根源となっている考え方がハイパーテキストリンクで、Webを実現する言葉がHTMLなのです。ハイパーテキストリンクの例【矢印の部分をクリックすると別のページへ移動する】 HTMLのコード【上記ページの裏側（ユーザーには見えない部分）の構造】 HTMLの種類 HTMLには「HTML4」「XHTML」「HTML5」など、バージョンや亜種があり、それぞれ文法や表現できることが少し違いますので注意しましょう。現在は、HTMLのバージョン5である、「HTML5」が一番よく使われています。大石ゆかりソースコード、ハイパーテキストリンク、マークアップ・・・。HTMLってこんなに難しいんですか？田島悠介 HTML自体は、Web上の文書みたいなもので、書籍や雑誌と同じだよ。大石ゆかりなるほど！じゃあ、書籍で言えばソースコードやリンクやマークアップは何に当たるんですか？田島悠介リンクは他のページの場所。マークアップはタイトルや見出し、ページにある画像などを指定してあげる方法のことなんだ。合わせてソースコードと言います。 HTMLファイルの作り方最後に、HTMLファイルの作り方ですが、「.html」という拡張子をつけることで、HTMLファイルであることをコンピュータが認識してくれます。（例 index.html）以下では、HTMLのタグの中で、リンク・画像・段落分けなどよく使用するタグについて基本的な書き方を解説します。ブラウザでの実際の表示も確認できるので、初めてHTMLに触れる方は、ぜひご覧ください。リンクを表示するリンクを作成した場所へページが移動しました。リンクを作成するには<a>タグを使用します。 <a>タグの書き方 <a href="リンク先へのパス">リンクを貼るテキストや画像</a> hrefの属性値(“”内)にリンク先の絶対パス(https://〜で始まるもの)あるいは相対パス(現在の位置を基準としたもの)を入力します。最後に必ず終了タグ</a>を入力します。使用例実際に<a>タグを使用してテキストにリンクを貼ります。今回は以下のURLを使って、「Coolors」というサイトへのリンクをつなげてみます。 https://coolors.co/ コード <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body>

HTML

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

HTMLで略語を表現する方法 – abbr【初心者向け】