HTMLとは
HTMLとは、Hyper Text Markup Languageの略で、Webページを制作するために開発された言語です。ハイパーテキストとは、ハイパーリンクの埋め込みが可能なテキストを指します。
ハイパーリンクは、Webページで下線のついたテキストをクリックすると別のページへ遷移するリンクです。Web上のボタンから別のWebページにリンクを貼ったり、Webページ内に画像や音声、動画などのデータをリンクで埋め込んだりすることが可能です。
マークアップは、文章の構成や文章の役割を示す意味を持ち、文字に印を付与していくことによってそれらを意味付けし、画像や表などを見られるようにします。たとえば、見出しや段落・表・リンクなど、文章が構成されている要素が持つ役割を指示します。
また、HTMLによって、検索エンジンがWebページの構造を把握しやすくすることも可能です。
関連記事：HTMLの勉強法を紹介！無料で利用できる学習サイトやアプリも
HTMLの歴史・バージョン
HTMLは1980年代に、SGMLから生まれた言語です。SGMLは、Standard Generalized Markup Languageの略で、当時ISOで標準化されていたSGMLは、表現の自由度は高いものの使いこなすのが難しいという問題がありました。そこで、環境問わず多くの人々が利用できるようにするために、SGMLの機能をベースとしたHTMLが誕生しました。
1989年にスイスにあるCERN（欧州原子核研究機構）において、計算機科学者のティム・バーナーズ・リー氏を中心に開発されました。ティム・バーナーズ・リー氏はWWW（ワールド・ワイド・ウェブ）を考案したことでも有名で、ほかにもURLやHTTPといった概念を設計しました。
HTMLが誕生した翌年には、サーバとブラウザが誕生します。Webページの制作において、HTMLと合わせて使用されるCSSが誕生したのは1996年頃で、CSSの誕生によってHTMLだけでは表現できない高度な装飾が可能となりました。その後、HTMLは年々バージョンアップを繰り返し、2023年現在ではHTML Living Standardが最新バージョンです。
| 年代 | バージョン | 備考 |
|---|---|---|
| 1989 | HTML | CERN、ティム・バーナーズ・リー氏が設計 |
| 1993 | HTML1.0/HTML+ | 最初のバージョンアップ 同年に、上位互換バージョン（HTML+）もリリース |
| 1995 | HTML2.0 | W3Cが管理することに |
| 1997 | HTML3.0/HTML3.2 | 3.0の規格化がまとまらず3.2が別物としてリリース |
| 1999 | HTML4.0/HTML4.01 | Visual Studio 2012と共に2012年にリリース |
| 2014 | HTML5.0 | ブログ向けの「article」要素 マルチメディア向けの「audio」および「video」要素 |
| 2016 | HTML5.1 | マイナーバージョンアップデート |
| 2017 | HTML5.2 | マイナーバージョンアップデート |
| 2021 | HTML Living Standard | 2023年時点で最新版 |
HTMLはマークアップ言語
マークアップ言語とは、Webサイト文章といったテキストに印付けを行い、コンピューターに認識させるための言語です。見出しや段落などの文章の意味合いを、タグと呼ばれる要素で記述して分類し装飾します。コンピューターは文章だけをアップロードされても文章の意味合いを理解できないためです。
マークアップ言語を活用すると、文章装飾が可能で、文字の強調レベルや優先度も調整できるため、何を伝えたいのかを見た目上でも分かりやすく表示できます。また、Webサイトの各ページは、以下の順序で閲覧されます。
-
1．検索エンジンのクローラーによってクロールされる
2．クロールで内容を把握されたあとにインデックスへ保存
3．ユーザーの検索条件に応じて検索結果一覧へ表示
上記2では、検索エンジンがWebサイトを把握する際に、HTMLのようなマークアップ言語が重要となります。見出しは見出し用のタグで囲むなどの適切なマークアップを行っていないと、クローラーが円滑にWebサイトの内容を利用できないからです。
クロールに時間がかかるだけではなく、検索結果にさえ表示されない危険性もあります。確実なマークアップを行うことにより、クロールのスピードも円滑になり、制作したWebサイトの検索順位にも良い影響を与えます。
HTMLの仕組み
文章にタグを付けただけのHTMLが、どのように普段目にしているWebサイトとして表示されるのか、その仕組みを解説します。
たとえば、あるWebページにアクセスすると、そのページのHTMLファイルをサーバーに対して要求します。サーバーはその要求にこたえ、指定されたHTMLファイルをユーザーのコンピューターへ送信します。
ただし、HTMLはタグのついた文字データでしかありません。このHTMLファイルをWebページとして表示させる必要があります。その役割を持つのがWebブラウザです。Webブラウザは、HTMLパーサーやHTMLレンダリングエンジンなどの機能を利用してHTMLをWebページとして表示させます。
HTMLを扱うフロントエンドエンジニアの需要
HTMLを扱うフロントエンドエンジニアは、Webサイトやアプリなどの画面に表示される部分の設計・構築に携わります。これらは、ユーザーが実際に操作する部分です。Webサイトやアプリの入口となるフロントエンドエンジニアは、あらゆるサービスを作る上で欠かせない存在です。
現在はPCだけではなく、スマートフォンやタブレットなど、さまざまな画面サイズのデバイスでWebサイトが閲覧されています。これらの対応はすべてフロントエンドエンジニアの役割です。
また、HTMLと同様に、現在のWebサイトのほとんどに使用されているJavaScriptに注目してみましょう。JavaScriptは、Webサイトを動的に見せられる言語です。海外のプログラミング言語コミュニティstack overflowの調査において、JavaScriptは最も使用されているプログラミング言語として9年連続1位となっています。
第2位はHTML/CSSで、Webのフロントエンドに関する言語が最も使用されています。よって、JavaScriptとHTML/CSSを主に扱うフロントエンドエンジニアに高い需要があることが推測できるでしょう。
関連記事：フロントエンドエンジニアに必要なスキル｜勉強法も一挙紹介
HTMLを使うメリット・デメリット
どのプログラミング言語にもメリットとデメリットがあるように、HTMLにもメリットとデメリットがあります。HTMLは厳密にいえばプログラミング言語ではなく、また定義とは無関係に、ほかのプログラミング言語と比較して扱い方がまったく異なります。そのため、メリットもデメリットも明確です。
以下では、HTMLを使うメリット・デメリットを紹介していきます。
HTMLを使うメリット
HTMLを使うメリットとして、Web制作ツールが不要である点やプログラミング初心者も学びやすいという点が挙げられます。
HTMLは、初めてのプログラミング学習に選択されることの多い言語で、ほかの言語と比較してもとにかく簡単に扱えるのが特徴です。
以下で、HTMLを使うメリット2点について詳しく説明します。
Web制作ツールがなくてもWebサイトを作れる
HTMLを書いてWebページを表示するのは簡単です。たとえばテキストエディタなどに適当なHTMLを書いて保存し、拡張子を変えてダブルクリックすれば、Webページが完成します。もちろん、きちんとしたWebページを作るには、複雑なコードを書いていく必要がありますが、Webページを作るだけならツール不要で記述も簡単です。
初心者でも学びやすい
HTMLはほかのプログラミング言語と比較して、圧倒的に簡単です。当然感じ方は人それぞれですが、それでもほかのプログラミング言語に比べてHTMLの難易度が低いことは万人に共通するでしょう。HTMLはタグで囲むことで文字などが表示されるだけなので、複雑なロジックや設計を考えることがありません。そのため、初心者でも学びやすいでしょう。
HTMLを使うデメリット
HTMLを学ぶこと自体は、プログラミング学習のスタートとしておすすめです。HTMLを書いて実行し、表示できれば、プログラミングの感覚を掴めるでしょう。しかし、HTMLを学べば、ほかのプログラミング言語スキルが身につくというわけではありません。Web以外のプログラミング言語はもちろん、ほかのWeb系プログラミング言語とも大きく異なるからです。
以下では、HTMLのデメリットについて解説します。
アルゴリズムを考える能力は身につかない
HTMLはタグで囲むだけなので、感覚的に記述できます。逆にいえば、アルゴリズムを考える能力は身につかないということです。プログラミングにおいてアルゴリズムは重要で、最終的には文法よりもいかに良いアルゴリズムを考えるかが良いプログラミングにつながるといっても過言ではないでしょう。HTMLでプログラミングに少し慣れることができますが、アルゴリズムを考えるスキルなどを習得するには、ほかの言語の学習も必要です。
ほかのプログラミング言語への応用はできない
HTMLの記述は非常に簡単であるものの、ほかのプログラミング言語とは仕様が全く違います。HTMLの知識を、そのままほかの言語へ応用することはできません。そのため、HTMLでプログラミングに慣れたと思っていても、ほかのプログラミング言語を始めたら難しく感じた、といったケースは多いでしょう。ただし、まずは感覚的に慣れることも重要なので、HTMLを学ぶ意味はあります。
HTMLを使用してできること
HTMLを使用すると何ができるのかを把握しておくことは、習得の検討に役立ちます。また、学習のモチベーションにもつながるでしょう。
HTMLは、主にWebサイトの開発に使用されますが、Webサイト以外にもHTMLメールやWebアプリのコーディングなどで活用されています。
以下では、HTMLを使用してできることを紹介します。
静的なWebサイトの制作
HTMLでは静的なWebサイトを制作できます。静的なWebサイトとは、誰がいつ表示しても同じように表示されるサイトです。ユーザーがどんな操作をしても、Webサイトの表示は変化しません。
そのため、個人で使用するサイトや、会社のコーポレートサイトなど、更新頻度が少なめで常に同じ情報を伝えたいサイトの制作に適しています。もし、ショッピングカートの更新などが行える動的サイトを制作したい場合は、HTMLに加えてJavaScriptを使用する必要があります。
HTMLメール
HTMLメールとは、画像やリンクが組み込まれたメールのことです。文字のフォントや色、大きさを変えることができ、テキスト内に画像や動画を入れて自由にレイアウトが可能です。単純な文章だけが並ぶメールよりも可視性が高く、よりユーザーの興味を引くように使用されます。HTMLメールの代表例として、企業のDMやメールマガジンなどが挙げられます。
Webアプリの基本的なコーディング
Webアプリとは、端末にダウンロードやインストールが不要で、Webブラウザ上で動作するアプリケーションのことです。GmailやYouTubeなどがWebアプリの代表例です。世界的に有名なこれらのWebアプリもHTMLによって制作されています。
HTMLを構成する3つの要素
HTMLは、タグ・要素・属性の3つで構成されています。タグと要素はHTMLで実装するのが基本で、属性についてはCSSで記載する場合が多いです。HTMLでも実装できるのですが、ある程度慣れたらCSSで実装したほうが効率的にコードを記述できるからです。特に規模が大きくなればなるほど、CSSの活用は必須になるでしょう。HTMLに慣れた後にCSSの学習も進めることをおすすめします。
ここでは、HTMLを構成する3つの要素について説明していきます。
タグ
タグとは、下記の例のように、テキストに意味を与える印です。タグの種類を示す文字や記号を「〈」と「〉」で括り、記述します。タグはコンピューターに文章構造を理解させるために必要で、意味ごとに文字や記号を括ってWebサイトを制作します。
例）
〈p〉〈/p〉、〈strong〉〈/strong〉など
タグの詳しい書き方については、次項で紹介します。
要素
要素は、下記の例のように、見出しや段落などマークアップしたい対象の文字列を、タグで囲んだ情報の単位です。要素は基本的に開始タグと終了タグをセットにして「〈」と「〉」で括って使用します。
例）
〈p〉こんにちは〈/p〉
属性
属性とは、HTMLの要素に追加する情報です。Webサイト上で複雑な表示をしたい場合に、要素のみでは情報不足なため、属性を追加します。属性はリンク先や動画の自動再生など要素の性質を設定するものです。
属性の指定方法）
〈要素名 属性名=”属性値”〉
HTMLの基本的なタグの書き方
HTMLの具体的なタグを知ることで、タグのルールや記述のイメージがつきます。ここでは、基本的な書き方について解説します。HTMLを書くようになると、よく使うタグは覚えていけるでしょう。そのため、紹介する内容を丸暗記する必要はありません。参考程度にさらっておくと、HTMLのタグ記述をイメージしやすくなります。
a（アンカー）
a（アンカー）はリンクを入れるためのタグです。anchorの略でaと記載しています。リンク先を示すhrefとセットで以下のように記述します。
〈a href=”URL”〉リンク先〈/a〉
上記のように記載すると、「リンク先」という文字列が表示され、その文字列にhrefに記載したURLのリンクが付与されます。
br（改行）
br（改行）はbreakの略です。改行したい部分に記述するというシンプルな使い方です。ほとんどのタグは後ろに「」が必要ですが、brは「<>」のみで使用します。改行したい箇所に以下のように記述するだけです。
〈br〉
head（ヘッダー）
headタグは、タイトルや説明文などWebページに関する情報を記述する範囲を示します。実際にユーザーの画面上に表示される領域ではなく、ブラウザや検索エンジンに情報を提供する領域です。
body
bodyタグは、実際にWebページ上に表示する文章や画像などを記述するタグです。
〈!DOCTYPE html〉
〈html lang="ja"〉
〈head〉
〈meta charset="UTF-8"〉
〈title〉タイトル〈/title〉
〈/head〉
〈body〉
〈p〉body内に文章や画像を記述する〈/p〉
〈/body〉
〈/html〉
title（タイトル）
titleタグは、headタグの内部に配置するものです。タイトルバーやブラウザのタブに表示されるWebページのタイトルを伝えるために使用します。
〈!DOCTYPE html〉
〈html lang="ja"〉
〈head〉
〈meta charset="UTF-8"〉
〈title〉タイトル〈/title〉
〈/head〉
〈body〉
〈p〉body内に文章や画像を記述する〈/p〉
〈/body〉
〈/html〉
h（見出し）
見出しタグは、テキスト情報に対して、重要なテーマ、またはユーザーに伝えたい内容であることを定義します。h1からh6まであり、見出しタグを挿入すれば検索エンジンが見出しであることを認識します。
〈!DOCTYPE html〉
〈html lang="ja"〉
〈head〉
〈meta charset="UTF-8"〉
〈title〉タイトル〈/title〉
〈/head〉
〈body〉
〈h1〉見出し１〈/h1〉
〈h2〉見出し２〈/h2〉
〈h3〉見出し３〈/h3〉
〈h4〉見出し４〈/h4〉
〈h5〉見出し５〈/h5〉
〈h6〉見出し６〈/h6〉
〈/body〉
〈/html〉
p（段落）
p（段落）は、Paragraph（パラグラフ）の略で、段落を表すタグです。文章を表示させる場合に使用します。〈p〉〈/p〉で囲まれた部分が1つの段落であることを意味します。
〈body〉
〈h2〉大見出し〈/h2〉
〈p〉ここに文章を記述する〈/p〉
〈/body〉
ul/ol/liタグ
ul / ol / liタグは、箇条書きを表示させるタグです。〈ul〉と〈li〉 のペアで数字無しの箇条書き、〈ol〉と〈li〉のペアで数字付きの箇条書きとなります。
〈body〉
〈ul〉
〈li〉箇条書きの項目を記述〈/li〉
〈li〉箇条書きの項目を記述〈/li〉
〈li〉箇条書きの項目を記述〈/li〉
〈/ul〉
〈/body〉
〈body〉
〈ol〉
〈li〉1番目の箇条書きの項目を記述〈/li〉
〈li〉2番目の箇条書きの項目を記述〈/li〉
〈li〉3番目の箇条書きの項目を記述〈/li〉
〈/ol〉
〈/body〉
imgタグ
imgタグは画像を表示させるタグで、終了タグは不要です。〈img src=” ” alt=” ” /〉と書き、「src=" "」の中には画像のファイル名とある場所を、「alt=" "」の中には代替テキストを入力します。
〈body〉
〈img src=”img/photo.png” width=”640” height=”480” alt=”代替テキスト”/〉
〈/body〉
divタグ
divタグは、複数の要素をまとめるためのタグで「division （ディビジョン、仕切り）」の略です。
〈body〉
〈div class=”クラス名入力”〉
〈p〉テキスト入力〈/p〉
〈/div〉
〈/body〉
navタグ
navタグは、文書内の主要なナビゲーションのセクションを表示させるタグです。Webサイトの各ページに共通して表示されるグローバルナビゲーションや、サイドバーにあるカテゴリーリストなどに使用します。
〈body〉
〈nav〉
〈h1〉メイン〈/h1〉
〈ul〉
〈li〉〈a href=”/”〉ブログ〈/li〉
〈li〉〈a href=”/menu”〉メニュー〈/li〉
〈li〉〈a href=”/contact”〉お問合せ〈/li〉
〈/ul〉
〈/nav〉
〈/body〉
tableタグ
テーブルタグを使うことで、表を作成できます。
〈table〉～〈/table〉の形で記述し、表内を線で区切るための「border=”XX”」を追加します。
このテーブルタグのあいだに、以下のタグを追加すれば、表ができます。
| 〈tr〉〈/tr〉 | 行を表すタグ。このタグのあいだに必要なセルのタグを入れる。 |
| 〈th〉〈/th〉 | テーブルの見出しを追加するタグ。 |
| 〈td〉〈/td〉 | テーブルにセルを追加するタグ。 |
以下は、「にんじん：100円、きゅうり：200円、大根：300円」の表を作る例です。
〈table border=”1”〉
〈tr〉
〈th〉野菜〈/th〉
〈th〉にんじん〈/th〉
〈th〉きゅうり〈/th〉
〈th〉大根〈/th〉
〈/tr〉
〈tr〉
〈th〉価格〈/th〉
〈td〉100円〈/td〉
〈td〉200円〈/td〉
〈td〉300円〈/td〉
〈/tr〉
〈/table〉
spanタグ
spanタグは囲った部分を切り出すタグです。spanタグで切り出した要素に属性を付与するという使い方です。たとえば、一部の文字のみ赤色にしたい場合などに使用します。
〈p〉黒〈span style="color:red;"〉赤〈/span〉黒〈/p〉
上記のように記載すると、spanタグの部分のみ赤色になります。
HTMLの応用的なタグの書き方
HTMLの応用的なタグの書き方について解説します。CSSを扱うようになるとあまり使わなくなるものもありますが、HTML単体での書き方を把握しておくことは重要です。HTML単体での書き方を把握しておくことで、CSSの理解もしやすくなるでしょう。
styleタグを使用したCSSの書き方
headタグの中にstyleタグを作り、その中にCSSを直接書くこともできます。終了タグの〈/head〉 の直前に 〈style〉 〈/style〉 と記述すると、bodyタグ内全体にスタイルが反映されます。
〈!DOCTYPE html〉
〈html lang="ja"〉
〈head〉
〈meta charset="UTF-8"〉
〈title〉タイトル〈/title〉
〈style〉
body {
color: red:
}
〈/style〉
〈/head〉
〈body〉〈/body〉
〈/html〉
絶対パスと相対パスの書き方
パスとは、Web上の場所を指定するものです。書き方には2種類あり、絶対パスと相対パスがあります。
絶対パスと相対パスそれぞれの書き方について紹介します。
絶対パス
絶対パスは、住所のように、Web上の絶対的な場所を指定します。Web上で絶対的な場所とは、URLです。絶対パスを使用してリンクを指定する場合は、「どのドメインの/どのフォルダの中の/どのファイル」であるかを、「/」（スラッシュ）で区切ってすべて書きます。主に別サイトのファイルを読み込む場合に使用します。
例）
https://xxx.jp/content/uploads/img/image.jpg
相対パス
相対パスは、現在いる場所から目的のファイルまでの道順を指定します。「どの階層の/どのファイル」であるかを、「/」と「..」を用いて表します。
たとえば、表示するページの1つ上の階層にある「imgファイル」の中に、表示させたいファイルが保存されているとすると、下記の例のように記述します。この場合、「..」が一つ上の階層を示し、「/img」が「imgファイルの中にある」ということを意味します。主に、同じサーバー内のファイルを読み込む場合に使用します。
例）
../img/image.jpg
相対パスは、サイト構成が変更になった場合の修正や管理が困難になるデメリットがあるため、HTMLの保守性を高めるには、絶対パスの使用をおすすめします。
コメント
HTMLでは、非表示のコメントが挿入可能です。コメントとは、コードの中に挿入するメモ書きのようなもので、複数人で管理する際に役立ちます。
〈body〉
〈h1〉見出し〈/h1〉
〈!-- ここに記述した文字は表示されない --〉
〈p〉表示させたいテキストを入力〈/p〉
〈/body〉
HTMLを使用してWebサイトを作る方法
実際にテキストエディタでコードを書いて表示させる方法を紹介します。
手順は簡単で、今までにプログラミングを一度もやったことがない人でもすぐにWebサイトを作れます。実際にやってみて体験することで、今後の学習の際に実際のプログラミングを掴んだ上で学習を進められるでしょう。
ブラウザとテキストエディタを用意
テキストエディタは、テキストが入力できれば何でも問題ありません。よく使用されるテキストエディタは、Visual Studio Code・Brackets・Atomなどです。使用しやすいものを選びましょう。また、ブラウザにおいても、Google ChromeやMicrosoft Edgeなど普段使用しているもので問題ありません。
テキストエディタにコードを記述
テキストエディタを開いてコードを記述します。以下のサンプルコードをテキストエディタに貼り付けて保存してください。保存する際のファイル名の拡張子は「.html」をつけて保存します。
〈!DOCTYPE html〉
〈html〉
〈head〉
〈title〉ここにタイトルを入力〈/title〉
〈meta charset="UTF-8"〉
〈/head〉
〈body〉
〈h1〉HTML入門〈/h1〉
〈p〉こんにちは〈/p〉
〈/body〉
〈/html〉
ブラウザにHTMLファイルをドラッグして表示する
保存したHTMLファイルをブラウザにドラッグします。ブラウザではHTMLファイルに記述されたコードが自動で変換され、Webページとして認識し、表示されます。自分だけがみられるWebページであれば、サーバーをレンタルしなくても制作できるため、この手順に沿ってHTMLコードの練習ができます。
関連記事：HTML5プロフェッショナル認定試験とは？取得するメリット
ブラウザで確認し、Webサイトを公開する
練習段階では不要ですが、ブラウザで確認した後にWebサイトを公開することが可能です。Webサイトを公開する方法は複数ありますが、レンタルサーバーを契約するのが一般的でしょう。レンタルサーバー上にWebサイトを公開すれば、ほかの人がアクセスできるようになります。
HTMLを習得し、理想のWebサイトを作成できたら、公開してみましょう。ほかの人がアクセスすることで分かる改善点もあるかもしれません。
CSS・JavaScriptとの関係性
HTMLとCSS・JavaScriptは合わせて使用されることがほとんどで、HTMLとセットで必要なスキルといえます。
ここではCSS・JavaScriptとの関係性や、連携方法について解説します。
CSSとは
CSSとは、レイアウトやWebサイトのサイズや色などの装飾を設定するためのプログラミング言語で、HTMLと組み合わせて使用することにより定義ができます。単に、スタイルシートと呼ばれることもあります。
HTMLだけで表現したWebサイトは、文字と画像だけが並んだだけの単調な見た目になってしまいますが、CSSでデザインを加えることにより、レイアウトや視覚的な振る舞いを制御し、ユーザーエクスペリエンスを向上させることができます。
CSSの目的とHTMLとの関係性
HTMLだけでもレイアウトや色、フォント、ページの見え方をある程度は指定できます。しかし、HTMLは本来テキストや画像などを表示することや、文章の持つ情報をコンピューターが認識できるようにするための言語であるため、CSSと目的が異なります。
たとえばCSSには下記のような目的や役割、HTMLとの関係性があります。
内容と表示の分離
HTMLは内容の構造を定義し、CSSはその表示を制御することで、内容とデザインを明確に分離することができます。これは、Webサイトのメンテナンスやアクセシビリティの向上に役立ちます。
CSSでレスポンシブデザインを実現する
メディアクエリを使用して、異なるデバイスや画面サイズに応じてWebページの表示を調整できます。
再利用性
スタイルをCSSに外部化することで、同じスタイルを都度HTMLに記載する必要がなく、複数のページに要素に簡単に適用することができ、効率的なコードの管理と再利用性を実現できます
JavaScriptとは
JavaScriptは、ブラウザを動的なものにするためのプログラミング言語です。HTMLとCSSで表現されたWebサイトは静的なもので、ポップアップ画面やカルーセルのようにアニメーションが動くものを表現できません。
そのため、動的な部分は、JavaScriptで指示します。JavaScriptを取り入れることによって視認性や利便性が向上し、ユーザーにとって使用しやすいサイトを実現できます。
JavaScriptの目的とHTML・CSSとの関係性
JavaScriptは、HTMLをコントロールする目的で使用されます。よりリッチなデザインとWebサイトを作成するためには、HTMLとCSSだけではなく、JavaScriptの知識も必須になります。
たとえばCSSには下記のような目的や役割があります。下記は一例です。
アニメーションやエフェクト
JavaScriptを使用して、Webページに動的なアニメーションやエフェクトを追加することができます。
Webアプリケーション開発
JavaScriptフレームワーク（例：React, Vue.js, Angularなど）を使用して、高度なアプリケーションを開発することができます。
非同期通信
AJAX (Asynchronous JavaScript And XML) を使用して、ページ全体をリロードすることなくサーバーとデータを非同期的に交換できます。これは、ユーザーエクスペリエンスを向上させるために広く活用されています。
JavaScriptの連携方法
HTMLからJavaScriptを呼び出す方法には、2つあります。
・HTMLにコードを埋め込む
・外部ファイルとして読み込む
一般的には外部ファイルとして読み込むことが多いでしょう。外部ファイルでJavaScriptのファイルを用意しておき、HTMLには以下のように記述します。
〈!-- 外部ファイルとしてJavaScriptを読み込む --〉
〈script src="js/sample.js"〉〈/script〉
HTMLに関するよくある質問
HTMLは感覚的に記述するだけでも動かせる、プログラミング初心者におすすめの言語です。これから習得しようと思っている方の中では、HTMLの概要や使用用途、CSSとの違いなどについて疑問に思う方が多いようです。
ここでは、HTMLに関するよくある質問と回答を紹介します。類似の疑問を持つ方は参考にしてみてください。
Q1. HTMLとは何ですか？
HTMLはHyperText Markup Languageの略です。HTMLをプログラミング言語と認識しても問題ないのですが、厳密にはマークアップ言語というものになります。マークアップ言語は文章を構造化するのに用いられる言語で、プログラミング言語に比べると簡易的に扱える特徴があります。
Q2. HTMLはどのようなときに使いますか？
HTMLは主にWebページを作成するときに使用されるマークアップ言語です。ページ内の文章などを構造化します。構造化とは、文章の表示や表示する際の形式指定などのことです。Webページの表面パーツを作る役割を担います。
Q3. HTMLの主な用途は何ですか？
HTMLの主な用途は、文章などWebページに配置するパーツを作ることです。HTMLは簡易的に記述できるマークアップ言語ですが、パーツを作っているのでWeb制作において重要度の高い言語になります。
Q4. HTMLとCSSの違いは何ですか？
CSSはCascading Style Sheetsの略です。HTMLで作ったパーツを装飾したり配置します。HTML単体でもある程度のページを作成できますが、CSSがあることでより自由度が上がります。またCSSは、単体使用ができず、必ずHTMLとセットで使います。
まとめ
HTMLはWebページの表面を作成できるマークアップ言語です。簡単に扱えることから、プログラミング学習の最初に選ばれることも多いでしょう。厳密にいえばプログラミング言語とは異なるので本格的なプログラミングスキルが身につくわけではありませんが、学習の入り口としておすすめです。
HTMLに慣れることでプログラミングがどのようなものかを体験し、そこからJavaScriptなどの言語を扱うことでアルゴリズムやロジックを学んでいくと良いでしょう。またHTMLは簡単ですがCSSでは案外つまづく人も多いため、思うように動かなくてもあきらめずに粘り強く取り組むことが重要です。
ITエンジニアの転職ならレバテックキャリア
レバテックキャリアはIT・Web業界のエンジニア職を専門とする転職エージェントです。最新の技術情報や業界動向に精通しており、現状は転職のご意思がない場合でも、ご相談いただければ客観的な市場価値や市場動向をお伝えし、あなたの「選択肢」を広げるお手伝いをいたします。
「将来に向けた漠然とした不安がある」「特定のエンジニア職に興味がある」など、ご自身のキャリアに何らかの悩みを抱えている方は、ぜひ無料のオンライン個別相談会にお申し込みください。業界知識が豊富なキャリアアドバイザーが、一対一でさまざまなご質問に対応させていただきます。
「個別相談会」に申し込む
転職支援サービスに申し込む
※転職活動を強制することはございません。
レバテックキャリアのサービスについて
