2024年7月13日 10:03【初心者・未経験向け】HTMLのタグを分かりやすく解説
.png&w=1920&q=75)
Web業界に足を踏み入れようとしているみなさんへ。この記事では、HTMLの中でタグがどのようにしてウェブページの骨組みを構築するのか、分かりやすく解説します。それではさっそく、タグの使い方についてしっかり理解していきましょう！
HTMLとは？ - Webページの骨組みを支える技術
HTMLの役割と基本構造
HTMLはWebページを作るための土台です。文字や写真をどこに、どんな順番で置くか決めるルールのようなものと考えてOKです。簡単に言うと、Webページを建てるための設計図ですね。
この設計図があることで、私たちは整理された情報を簡単に読み取ることができます。
タグって何？ - HTML文書の基本要素
タグは、HTMLで情報をどのように表示するかを指示するものです。例えば、タイトルや段落を示すためにタグを使います。これらのタグを使うことにより、テキストが大見出しなのか、リストの一部なのかをWebブラウザに教えます。
タグを使うことで情報がきれいに整理され、読みやすいWebページを作ることができます。
＜HTMLタグの具体例＞
<h1>: ページの主要な見出し。最も重要なタイトルに使います。<p>: 段落を作成。テキストのブロックを形成します。<a>: リンクを作成。他のページやサイトへの道を示します。<img>: 画像を表示。Webページに視覚的要素を加えます。<ul>: 箇条書きリスト。項目のリストを作成します。
その他、さまざまなタグによってHTMLは構成されます。このブログのシリーズでは、よく利用されるタグの種類や使い方について、実際にWebサイトを作る流れに沿って紹介していきます。
〜このブログを読んだらできるようになること〜
ブログの手順通りにコーディングを進めると、H T M Lタグの理解を深めながらご自身のポートフォリオとして使えるWebサイトの骨組みが完成します！
必須のHTMLタグ - あなたのWebサイトを作ってみよう！その１
<!DOCTYPE>と<html> - HTML文書のスタートとエンド
最初のステップは、<!DOCTYPE>と<html>です。これは本の表紙のようなもので、Webページの始まりと終わりを示します。
<head>タグの中身 - ウェブページの情報を設定する
<head>は、Webページの顔ではなく、脳のような部分。ここにはページのタイトルや、他のファイルへのリンクなど、見えない重要情報が詰まっています。
<body> - Webページのコンテンツが生きる場所
そして、<body>が本体。ここにはテキストや画像など、訪問者に見せたい全ての内容が入ります。まるで家の中の家具や装飾のようなものです。
上記３つのタグを使うとこんなコーディングになります
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>私のポートフォリオ</title>
<meta name="description" content="個人のポートフォリオウェブサイト">
</head>
<body>
<!---ここにタグを書くことでウェブサイトの見た目が構築されます！---->
</body>
</html>これでHTMLのコーディングの下準備ができました。（上記のコードをコピーして使ってOKです！）
しかし、実際はこの状態でパスをコピーしてWebサイトの画面を映し出しても、このままでは何も映りません。
<body>タグの中にタグを記載することでようやく文字や画像などが表示され、皆さんがよく見るWebサイトのような見た目に近づいていきます。
次回のブログでは、この<body>タグの中身を一緒に構築していきましょう！
それぞれどんな役割をもつのか解説していくので、タグに関する理解を深めながらコーディングが進められます。
次回の記事はコチラ▶ 【初心者・未経験向け】コンテンツを彩るHTMLタグ - タイトルの作成 headerタグ
前回の記事はコチラ▶ HTML とは？未経験者・初心者にもわかりやすく説明
この記事を書いた人
元々営業職でエンジニアの知識がゼロのところからプログラマーを目指して勉強中です。
元々営業職でエンジニアの知識がゼロのところからプログラマーを目指して勉強中です。
.png&w=640&q=75)
