HTML（HyperText Markup Language）は、ウェブページを作成するための基本的な言語です。
Webデザイナーやフロントエンドエンジニアなどが主にこの言語を扱います。
この記事では、HTMLの概要とその重要性について、初心者向けに分かりやすく解説します。
HTMLは、ウェブページの構造を定義するために使用され、テキスト、画像、リンク、フォームなど、さまざまな要素を配置します。
HTMLの基本構造
HTML文書は、<!DOCTYPE html>宣言から始まり、<html>, <head>, <body>という3つの主要なセクションに分かれています。
VsCodeショートカットキー：シフト+1では雛形を作成できます！
HTML
<!DOCTYPE html>
<html>
<head>
<title>Roa run dev</title>
</head>
<body>
<h1>Hello, Roa run dev</h1>
<p>Roa run dev ポートフォリオです </p>
</body>
</html>HTMLの主要な要素
見出しタグ:
<h1>から<h6>までのタグは、文書の見出しを定義します。
<h1>タイトル</h1>
<h2>セクション-タイトル</h2>
<h3>サブセクション-タイトル</h3>
<h3>サブセクション-タイトル</h3>
<h2>セクション-タイトル</h2>
<h3>サブセクション-タイトル</h3>
<h3>サブセクション-タイトル</h3>
<h2>セクション-タイトル</h2>
<h3>サブセクション-タイトル</h3>
<h3>サブセクション-タイトル</h3>段落タグ:
<p>は、段落を定義します。
<h1>タイトル</h1>
<h2>セクション-タイトル</h2>
<p>段落-文章、文章、文章、文章</p>
<h3>サブセクション-タイトル</h3>
<p>段落-文章、文章、文章、文章</p>
<h3>サブセクション-タイトル</h3>
<p>段落-文章、文章、文章、文章</p>リンクタグ:
<a href="URL">は、他のウェブページへのリンクを作成します。
<h1>タイトル</h1>
<h2>セクション-タイトル</h2>
<p>段落-文章、文章、文章、文章</p>
<h3>サブセクション-タイトル</h3>
<p>段落-文章、文章、文章、文章</p>
<h3>サブセクション-タイトル</h3>
<p>段落-文章、文章、文章、文章</p>
<p><a href="./">一覧へ<a></p>画像タグ:
<img src="URL" alt="description">は、画像を表示します。
<h1>タイトル</h1>
<p><img src="./asset/images/cover.png" alt="カバー画像"></p>HTMLとCSS、JavaScriptの関係
- HTML：マークアップ（骨組み）
- CSS：スタイリング（装飾）
- JavaScript：スクリプト（動的処理）
HTMLは、ウェブページの構造を定義する役割を果たしますが、デザインや動的な機能はCSS（Cascading Style Sheets）とJavaScriptによって実現されます。CSSは、HTML要素のスタイルを定義し、JavaScriptは、ウェブページのインタラクティブな動作を実現します。
まとめ
初心者がHTMLを学ぶ際には、まずはファイルの作成法や基本的なタグを覚え、段階的に学習を進めることが重要です。
簡単なWebページを作成してみて、どう表示されるか確認しながら進めましょう。
CSSやJavaScriptと組み合わせて使うことで、さらにインタラクティブなページを作成できるようになります。