【ITニュース解説】🔥 HTML Refresher Series – Part 1: Getting Started with HTML
2025年09月12日に「Dev.to」が公開したITニュース「🔥 HTML Refresher Series – Part 1: Getting Started with HTML」について初心者にもわかりやすく解説しています。
ITニュース概要
HTMLはWebページの骨格を作る言語で、コンテンツの構造を定義する。この記事では、HTMLの基本構造や、見出し、段落、リンク、画像といった主要タグの使い方をコード例で解説。Webサイト制作の第一歩として、HTMLの基礎を学べる入門編だ。
ITニュース解説
HTMLは、ウェブサイトを構築するための最も基本的な言語である。ウェブページに表示されるコンテンツの構造を定義し、ブラウザに対してどのような情報が存在するかを伝える役割を担っている。例えば、テキスト、画像、リンク、フォームといった要素をウェブページ上に配置するためには、必ずHTMLが必要となる。HTMLがウェブページの「骨格」を作り上げる一方、その見た目を整えるのはCSS（Cascading Style Sheets）の役割であり、ユーザーとの対話や動的な動作を司るのはJavaScriptの担当である。これら三つの技術が連携することで、機能的で見た目にも美しいウェブサイトが完成する。
HTMLドキュメントは、特定の共通の構造に従って記述される。まず、ドキュメントの冒頭には<!DOCTYPE html>という宣言が必要だ。これはブラウザに対し、このファイルがHTML5規格で書かれたドキュメントであることを伝える。次に、すべてのHTML要素を包含するルート要素として<html>タグが存在する。この<html>タグ内には、ウェブページに関するメタ情報（目に見えない情報）を格納する<head>要素と、実際にウェブページに表示されるすべてのコンテンツを格納する<body>要素の二つが配置される。
<head>要素の中には、ウェブページ自体に関する設定や情報が記述される。例えば、<meta charset="UTF-8">は、使用する文字コードを指定し、日本語などの多様な言語を正しく表示するために不可欠な設定である。<meta name="viewport" content="width=device-width, initial-scale=1.0">は、ページの表示領域に関する設定で、スマートフォンなどの様々なデバイスでウェブページが適切に表示されるように調整するために使われる。そして、<title>Hello World</title>のように記述することで、ウェブブラウザのタブやウィンドウのタイトルバーに表示されるページのタイトルを設定できる。これらの<head>内の情報は、通常はユーザーの目には直接触れないが、ウェブページの機能や表示、検索エンジン最適化（SEO）にとって非常に重要な役割を果たす。
一方、<body>要素の中には、ユーザーがウェブページを閲覧した際に目にするすべてのコンテンツが記述される。例えば、<h1>Welcome to HTML!</h1>と書けば「Welcome to HTML!」という見出しが表示され、<p>This is my first web page.</p>と書けば「This is my first web page.」という段落が表示される。
ウェブページにおけるテキストの表現には、さまざまな方法がある。見出しは<h1>から<h6>までのタグで表現され、数字が小さいほど重要度が高く、通常は大きく表示される。<h1>はページの主要なタイトルに、<h2>はサブタイトルに、といったようにコンテンツの階層構造を明確にするために使われる。一般的な文章の段落は<p>タグで囲んで記述する。テキストを装飾するタグとして、<strong>はテキストを強調し、通常は太字で表示されるが、その内容が特に重要であることを意味する。<em>はテキストに重点を置き、通常は斜体で表示される。また、<mark>タグはテキストをハイライト表示する際に用いられ、特定の箇所に注目させたい場合に有効である。
ウェブページに不可欠な要素として、リンクと画像がある。リンクは<a>（アンカー）タグを使って作成する。例えば、<a href="https://dev.to" target="_blank">Visit Dev.to</a>と記述すると、「Visit Dev.to」というテキストがクリック可能なリンクとなり、指定されたURLに移動できる。href属性はリンク先のURLを指定し、target="_blank"属性は、リンクをクリックした際に新しいブラウザのタブでページを開くことを指示する。
画像は<img>タグを使ってウェブページに埋め込む。例えば、<img src="cat.jpg" alt="Cute cat smiling">と記述すると、「cat.jpg」という画像ファイルが表示される。src属性には表示したい画像のファイルパスまたはURLを指定する。alt属性は、画像が表示できない場合に代わりに表示されるテキスト、または視覚障碍者向けのスクリーンリーダーが読み上げる説明文を提供する。このalt属性は、ウェブページのアクセシビリティ向上だけでなく、検索エンジンが画像の内容を理解する上でも非常に重要である。
これらの基本的なHTMLの知識を組み合わせることで、シンプルなウェブページを自分で作成できる。例えば、「Hello World」ページを作成するミニプロジェクトでは、これまでに学んだタグがどのように組み合わされるかを確認できる。
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Hello World</title> 7</head> 8<body> 9 <h1>Hello, World!</h1> 10 <h2>About Me</h2> 11 <p>My name is Sharad and I love <strong>coding</strong> + <em>coffee</em>.</p> 12 13 <h2>Find Me Online</h2> 14 <p> 15 <a href="https://dev.to" target="_blank">Follow me on Dev.to</a> 16 </p> 17 18 <h2>My Cat</h2> 19 <img src="cat.jpg" alt="A cute cat sitting on the sofa"> 20</body> 21</html>
このコードでは、まず<!DOCTYPE html>と<html>タグでHTMLドキュメントの基本構造を定義している。<head>内では、文字コード設定、ビューポート設定、そしてページのタイトルを「Hello World」と設定している。<body>内には、ユーザーに見えるコンテンツが配置される。<h1>Hello, World!</h1>でメインの見出しを表示し、<h2>About Me</h2>で自己紹介のセクションを開始している。その下の<p>タグ内では、<strong>coding</strong>と<em>coffee</em>を使ってテキストを強調している。次に、<h2>Find Me Online</h2>でオンラインプロフィールへの案内を行い、<a href="https://dev.to" target="_blank">Follow me on Dev.to</a>でDev.toへのリンクを新しいタブで開くように設定している。最後に、<h2>My Cat</h2>の見出しの下に、<img src="cat.jpg" alt="A cute cat sitting on the sofa">という記述で猫の画像を表示させている。ここでsrc="cat.jpg"は、このHTMLファイルと同じディレクトリに「cat.jpg」という画像ファイルがあることを想定している。
このように、HTMLはウェブページの構造を定義するための強力なツールである。基本的なタグとその使い方を理解することは、ウェブ開発の第一歩として非常に重要であり、ここからさらにCSSやJavaScriptといった技術を学ぶことで、より高度でインタラクティブなウェブサイトを構築できるようになる。この基礎をしっかりと身につけることで、ウェブの世界での可能性が大きく広がるだろう。