HTMLとは何か ウェブ制作の最初の一歩

HTMLはウェブページの構造を記述するためのマークアップ言語です。
見出しや段落や画像やリンクなどをタグで囲むことでブラウザに文書の意味を伝えます。
デザインはCSSが担当するためHTMLでは情報の骨組みを意識して記述することが重要です。
検索エンジンもHTMLを読み取ってページ内容を理解するので正しいマークアップはSEOにもつながります。

HTML文書の基本構造を知る

実際のHTMLファイルはdoctype宣言とhtml要素とhead要素とbody要素で構成されます。
headにはタイトルや文字コードの指定などページの情報を記述しbodyには実際に画面に表示されるコンテンツを入れます。
この最小構成を理解しておくと後からどんな要素が増えても迷いにくくなります。

See the Pen HTMLとは？ウェブ制作の最初の一歩 by Syo Yanai (@h1-tech-japan) on CodePen.

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>基本的なHTML文書の骨組み</title>
</head>
<body>
    <h2>はじめてのHTMLページ</h2>
    <p>これは段落のテキストです。HTMLでは見出しと段落を使って文書の構造を作ります。</p>

    <h3>リストの例</h3>
    <p>ul要素とli要素を使うと箇条書きを表現できます。</p>
    <ul>
        <li>箇条書き一つ目</li>
        <li>箇条書き二つ目</li>
        <li>箇条書き三つ目</li>
    </ul>
</body>
</html>

CSS

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.7;
    padding: 24px;
}

h2 {
    font-size: 22px;
    margin-bottom: 12px;
}

h3 {
    font-size: 18px;
    margin-top: 24px;
}

初心者が意識したいポイント

最初のうちは見た目よりも意味の正しさを優先しましょう。
見出しにはページのテーマとなるキーワードを含め本文は段落ごとにpタグで区切ります。
後からCSSで自由に装飾できるので無理にタグで見た目を調整しようとせず構造を整えることが上達への近道です。