2024年現在でも、人気の職種webデザイナー・HTMLコーダー
これから学びたい人でも決して遅くはありません。年齢も関係ありません。実際30代以上からでも学ぶ人はかなり多いです。
今後も転職活動でweb業界に行く人は多いと思います。実績がなくても問題はありませんが、基本的なコーディングは多少できて欲しいです。
そんな人向けにHTMLの基本的な書き方について、初心者向けに丁寧に説明をしていきます。
この記事では、HTMLの基礎的な構造から、よく使用されるタグ(<div>
、<section>
、<span>
など)について詳しく説明し、画像の挿入方法や、正しい使い方についても紹介しています。
この記事では、初心者に向けての内容です。
HTMLタグの使い方から、そもそもコーディングとは?などゆっくり見ていきましょう。
これが皆さんのコーディングにとって最初のステップになれば嬉しいです。
まずはこの内容を頭に叩き込みましょう!!
1. HTMLとは?
HTMLの概要
HTML(HyperText Markup Language)は、ウェブページを作成するためのマークアップ言語です。HTMLの主な役割は、テキスト、画像、リンク、フォームなどをウェブブラウザ上で表示させることです。HTMLは構造を表すためのタグ(<tag>
)を使用し、これらのタグを組み合わせてページの内容を定義します。
2. HTMLの基本構造
まず、HTMLドキュメントの基本構造を理解することが重要です。どのHTMLページも以下の基本的な要素で構成されています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML入門</title>
</head>
<body>
</body>
</html>
<DOCTYPE html>
この宣言は、HTML5の文書であることをブラウザに伝えます。これにより、ブラウザが適切なモードでページをレンダリングします。
<meta charset="UTF-8">
– 文字エンコーディング
<meta charset="UTF-8">
このタグは、ページの文字エンコーディングを指定します。UTF-8
は多くの言語をサポートしているエンコーディング形式で、現在のウェブ標準として推奨されています。日本語や他の特殊な文字も正しく表示するために、UTF-8
を使うのが一般的です。
- 重要性: 文字化けを防ぐため、必ず指定しておきましょう。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
– ビューポート設定
<meta name="viewport" content="width=device-width, initial-scale=1.0">
ビューポートは、ユーザーがページを表示しているブラウザの表示領域のことを指します。このタグは、ページがモバイルデバイスやタブレットでも適切に表示されるように設定するために使います。
width=device-width
: デバイスの画面幅に合わせてページの幅を調整します。initial-scale=1.0
: ページを最初に読み込んだときのズームレベルを1倍(デフォルト)にします。- 重要性: モバイルファーストの時代において、レスポンシブデザインをサポートするために必須です。
<title>
– ページのタイトル
<title>ウェブページのタイトル</title>
このタグは、ブラウザのタブや検索エンジンの検索結果に表示されるページのタイトルを指定します。適切なタイトルは、検索エンジン最適化(SEO)にとって非常に重要です。
- ポイント:
- ページの内容を端的に表すタイトルを設定しましょう。
- 一般的に、タイトルは50〜60文字以内が推奨されています。
<meta name="description" content="ページの簡単な説明">
– ページの説明
<meta name="description" content="このページの内容に関する簡単な説明。">
このタグは、ページの内容に関する簡単な説明を指定します。検索エンジンはこの説明を参考に、検索結果に表示するスニペットを生成することがあります。
- ポイント:
- ページの内容を的確に表す説明を設定することで、SEOに貢献します。
- 150文字程度の簡潔な説明文が理想です。
<meta name="keywords" content="キーワード1, キーワード2, キーワード3">
– キーワード設定
<meta name="keywords" content="HTML, 初心者, ウェブ開発">
このタグは、ページに関連するキーワードを設定しますが、現在のSEOにおいてはほとんど使われていません。以前は、検索エンジンがこの情報を元にページを分類していましたが、キーワードの乱用が増えたため、現在は重要視されていません。
<link rel="stylesheet" href="styles.css">
– スタイルシートのリンク
<link rel="stylesheet" href="styles.css">
このタグは、外部のCSSスタイルシートをHTMLページに適用するために使用します。href
属性に外部スタイルシートのURLまたはパスを指定します。
- ポイント:
- 複数のCSSファイルをリンクさせることも可能です。
- CSSファイルを別に分けることで、HTMLコードがスッキリし、メンテナンスが容易になります。
<link rel="icon" href="favicon.ico">
– ファビコンの設定
<link rel="icon" href="favicon.ico">
ファビコン(favicon)は、ブラウザのタブやブックマークに表示される小さなアイコンです。このタグを使って、ページにファビコンを設定します。
- ポイント:
favicon.ico
ファイルを指定するのが一般的ですが、他の形式(PNG、SVGなど)もサポートされています。- ファビコンのサイズは通常16×16ピクセルか32×32ピクセルです。
<meta name="robots" content="index, follow">
– 検索エンジンへの指示
<meta name="robots" content="index, follow">
このタグは、検索エンジンのクローラー(ロボット)に対して、ページをどのように処理するかを指示します。
index
: ページを検索結果にインデックス登録します。follow
: ページ内のリンクをたどって他のページもインデックスします。
検索エンジンにインデックスさせたくない場合は、noindex
を指定し、リンクをたどらせたくない場合はnofollow
を使います。
<meta property="og:〜">
– Open Graph(OGP)設定
Open Graphは、主にSNSでページがシェアされたときに表示される内容を指定するためのタグです。これにより、SNSでの表示を最適化できます。
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">
og:title
: ページのタイトルog:description
: ページの説明og:image
: シェア時に表示される画像のURLog:url
: ページのURL
SNSでのシェア効果を高めるために、Open Graphタグを設定するのは非常に重要です。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
– 互換性設定
<meta http-equiv="X-UA-Compatible" content="IE=edge">
このタグは、Internet Explorerが最新のレンダリングモードでページを表示するように指示します。古いIEモードを回避し、互換性の問題を減らすために使われます。
<html>
このタグはHTML文書の開始と終了を示します。全てのHTMLコンテンツはこのタグの中に書かれます。
<head>
<head>
タグは、ページのメタ情報(文字コード、ページタイトル、スタイルシートのリンクなど)を含む部分です。
<body>
<body>
タグは、実際にブラウザに表示されるコンテンツを含む部分です。文章や画像、リンク、ボタンなどは全てこの中に書かれます。
3. 基本的なタグの書き方
次に、よく使われるHTMLタグを見ていきましょう。
3.1 見出しタグ(<h1>
〜<h6>
)
見出しタグは、ページのセクションを区切るために使います。<h1>
が最も重要な見出しで、<h6>
が最も重要度の低い見出しです。
<h1>これは見出し1です</h1>
<h2>これは見出し2です</h2>
3.2 段落タグ(<p>
)
段落タグは、テキストを段落として表示する際に使います。
<p>これは段落です。</p>
3.3 リンクタグ(<a>
)
リンクタグは、別のページやウェブサイトへのリンクを作成するために使います。
<a href="https://example.com">こちらをクリックしてください</a>
href
属性にリンク先のURLを指定します。
4. ブロックレベル要素とインライン要素
HTMLには「ブロックレベル要素」と「インライン要素」という2つのカテゴリがあります。それぞれ、要素がページ上でどのように表示されるかを決定します。
4.1 ブロックレベル要素
ブロックレベル要素は、ページ上で他の要素とは独立して表示されます。一般的なブロックレベル要素には、<div>
、<section>
、<article>
、<header>
などがあります。
<div>
タグ
<div>
タグは、他の要素をグループ化するために使います。意味的な役割は持たないため、特に装飾を加えたい部分やレイアウトを整えるために使われます。
<div>
<p>この部分は<div>タグで囲まれています。</p>
</div>
<section>
タグ
<section>
タグは、意味のあるセクションを示します。特定のテーマに関連する内容をまとめるのに適しています。
<section>
<h2>セクションタイトル</h2>
<p>このセクションの内容です。</p>
</section>
4.2 インライン要素
インライン要素は、他の要素と同じ行に表示されます。代表的なインライン要素には、<span>
、<a>
、<img>
などがあります。
<span>
タグ
<span>
タグは、インライン要素にスタイルを適用したい場合に使います。
<p>この文章の<span style="color: red;">一部</span>だけ赤く表示します。</p>
<img>
タグ
<img>
タグは、画像を表示するために使用します。src
属性で画像のURLを指定し、alt
属性で画像が表示されない場合の代替テキストを指定します。
<img src="image.jpg" alt="画像の説明" width="300">
5. 画像の使い方
画像をHTMLに挿入する方法をさらに詳しく見ていきましょう。
5.1 基本的な画像挿入
画像を挿入するには、<img>
タグを使います。画像のサイズや位置もCSSで調整できます。
<img src="https://example.com/photo.jpg" alt="説明文" width="500">
6. フォームの作成
フォームは、ユーザーから情報を入力してもらうための手段です。フォームを作成する際に使用するタグには、<form>
、<input>
、<textarea>
、<button>
などがあります。
<form action="/submit" method="POST">
<label for="name">名前:</label>
<input type="text" id="name" name="name">
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email">
<button type="submit">送信</button>
</form>
7. HTMLのベストプラクティス
7.1 セマンティックHTMLを使う
セマンティックHTMLとは、要素がその内容に合った意味を持つことです。これにより、ページのアクセシビリティやSEOが向上します。
<header>
: ページやセクションのヘッダー<nav>
: ナビゲーションリンク<article>
: 自立したコンテンツ<footer>
: ページやセクションのフッター
7.2 属性を正しく使う
属性はタグに追加の情報を提供します。たとえば、alt
属性を使って、画像が表示されない場合に説明を提供することが推奨されています。
8 コード実装
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="初心者向けのHTMLの基本構造">
<meta name="robots" content="index, follow">
<meta property="og:title" content="HTML基本構造">
<meta property="og:description" content="HTMLの基本的なタグや構成を学ぶためのページ">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">
<title>HTMLの基本構成</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<header>
<h1>HTMLの基本構成を学ぼう</h1>
<nav>
<ul>
<li><a href="#section1">HTMLとは</a></li>
<li><a href="#section2">基本タグ</a></li>
<li><a href="#section3">まとめ</a></li>
</ul>
</nav>
</header>
<main>
<section id="section1">
<h2>HTMLとは</h2>
<p>HTML(HyperText Markup Language)は、ウェブページを作成するためのマークアップ言語です。HTMLは、テキストに構造を持たせるために使用され、ウェブブラウザでページを表示するための基盤となります。</p>
</section>
<section id="section2">
<h2>基本タグ</h2>
<p>HTMLには、ページの内容を定義するためのさまざまなタグがあります。ここでは、よく使用されるタグについて説明します。</p>
<article>
<h3>1. `<div>`タグ</h3>
<p>`<div>`タグは、HTMLで要素をブロックとして区切るためのコンテナです。スタイルやスクリプトを適用するために使います。</p>
<pre><code><div>これはdivタグです</div></code></pre>
</article>
<article>
<h3>2. `<section>`タグ</h3>
<p>`<section>`タグは、意味的に関連するコンテンツのセクションを定義します。例えば、ページ内の異なるトピックごとに分ける際に使用されます。</p>
<pre><code><section>セクション1の内容</section></code></pre>
</article>
<article>
<h3>3. `<span>`タグ</h3>
<p>`<span>`タグは、インライン要素をグループ化するために使用されます。特定のテキスト部分にスタイルを適用する際などに便利です。</p>
<pre><code><span>重要な部分</span></code></pre>
</article>
<article>
<h3>4. 画像の挿入</h3>
<p>画像をHTMLに挿入するには、`<img>`タグを使います。`src`属性で画像ファイルのパスを指定し、`alt`属性で画像が表示されない場合の代替テキストを提供します。</p>
<pre><code><img src="image.jpg" alt="説明文"></code></pre>
</article>
</section>
<section id="section3">
<h2>まとめ</h2>
<p>HTMLの基本タグには、ページを構造化するための重要な役割があります。これらのタグを理解し、適切に使用することで、読みやすく、管理しやすいウェブページを作成できます。</p>
</section>
</main>
<footer>
<p>© 2024 ウェブ開発入門</p>
</footer>
<script src="scripts.js"></script>
</body>
</html>
まとめ
この記事では、HTMLの基本的な構造やよく使われるタグについて説明しました。HTMLはウェブ開発の基本であり、正しく理解することでウェブサイトの構築がスムーズに進みます。初めての方は、まずこれらの基本的な要素を使いながら、自分でページを作成してみてください。
HTMLを学んだ後は、CSSやJavaScriptを学ぶことで、よりインタラクティブでデザイン性の高いページを作成できるようになります。
【HTML&CSS】表(tableタグ)の使用について