Roa run dev

HTMLとは？概要をわかりやすく解説【入門】

●目次

    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と組み合わせて使うことで、さらにインタラクティブなページを作成できるようになります。