＜初学者向け＞HTNLについてまとめてみた①

HTMLとは

HTML（HyperText Markup Language）とは、ウェブページを作成するための基本的な言語です。HTMLを使うことで、テキストや画像、リンクなどをウェブページに表示することができます。(wiki)

皆さんが、普段PCやスマホで目にしているウェブ画面はHTMLで作成されています。
.htmlファイルを作成すれば自分のPCでも開くことが可能です。

コード種類(必須)

No	タグ	属性
1	<h1> ~<h6>
2	<p>
3	<a>	href, target
4	<ul> ,<ol> ,<li>
5	<img >	src, alt

１.<h1>~<h6>タグ(見出しタグ)

html

    <h1>これはH1見出しです</h1>
    <p>H1は最も重要な見出しです通常ページのタイトルに使われます</p>

    <h2>これはH2見出しです</h2>
    <p>H2はセクションの見出しに使われます</p>

    <h3>これはH3見出しです</h3>
    <p>H3はH2の下位に位置する見出しに使われます</p>

    <h4>これはH4見出しです</h4>
    <p>H4はさらに細かい見出しに使われます</p>

    <h5>これはH5見出しです</h5>
    <p>H5は詳細なセクションの見出しに使われます</p>

    <h6>これはH6見出しです</h6>
    <p>H6は最も小さく最も低い階層の見出しに使われます</p>

これはH1見出しです

H1は最も重要な見出しです通常ページのタイトルに使われます

これはH2見出しです

H2はセクションの見出しに使われます

これはH3見出しです

H3はH2の下位に位置する見出しに使われます

これはH4見出しです

H4はさらに細かい見出しに使われます

これはH5見出しです

H5は詳細なセクションの見出しに使われます

これはH6見出しです

H6は最も小さく最も低い階層の見出しに使われます

ポイント
ページ内で複数の見出しを使う際は、<h1>タグは1ページに1つが望ましいです。
見出しの順序は論理的に使用します。
例えば、<h2>タグの下に<h3>タグ、その下に<h4>タグと階層構造を守ります。
検索エンジンのSEOにおいて、適切な見出しタグの使用が重要とされています。

２.<p>タグ(段落タグ)

html

<p>.これは1つ目の段落です段落は通常.文章をまとめるために使用されます</p>
<p>.これは2つ目の段落です段落は通常.文章をまとめるために使用されます</p>

これは1つ目の段落です。段落は通常、文章をまとめるために使用されます。

これは2つ目の段落です。段落は通常、文章をまとめるために使用されます。

ポイント
段落の自動改行: <p>タグを使うと、段落が自動的に改行されてブラウザに表示されます。
複数の段落: 文章を整理するために、複数の段落を使って文章を分けることが推奨されます。
<p>タグを使わない場合、テキストが続けて表示されてしまいます。

３.<a>タグ,href属性,target属性

html

<a href="リンク先のURL">リンクのテキスト</a>
<a href="/about">Aboutページへ</a>
<a href="#code_category">コード種類へ</a>
<a href="https://www.example.com" target="_blank">新しいタブで開くリンク</a>

リンクのテキスト
Aboutページへ
コード種類へ
新しいタブで開くリンク

ポイント
<a>タグ: リンクを作成するためのタグ。
href属性はリンク先を指定します。空の場合はリンクとして機能しません。
外部リンクを新しいタブで開きたいときは、target="_blank"を使用しますが、多用するとユーザビリティに影響を与えることもありますので注意が必要です。

４.<ul> ,<ol> ,<li>タグ

html

<ul>
  <li>リンゴ</li>
  <li>オレンジ</li>
  <li>バナナ</li>
</ul>
<ol>
  <li>リンゴ</li>
  <li>オレンジ</li>
  <li>バナナ</li>
</ol>

• リンゴ
• オレンジ
• バナナ

1. リンゴ
2. オレンジ
3. バナナ

ポイント
<ul>タグは順序なしリストを表します。通常、箇条書きとして表示されます（各リスト項目に「・」などのマークがつく）。
<ol>タグは順序付きリストを表します。リスト項目は数字やアルファベットで順番に並べられます。
<li>タグは、リスト内の各項目を定義します。<ul>または<ol>の中に配置され、リストの各行を表します。

５.<img > タグ,src属性, alt属性

html

<img src="https://example.com/image.jpg" >
<img src="https://example.com/image.jpg" alt="猫の画像">

ポイント
<img>タグは、HTMLで画像を表示するためのタグです。
主に2つの属性がよく使われます：srcとaltです。
src属性は、表示したい画像のパスまたはURLを指定します。この属性は必須です。
alt属性は、画像が表示されないときに代わりに表示されるテキストを指定します。また、視覚障害者のためのスクリーンリーダーにも利用されます。SEOやアクセシビリティの観点からも重要です。

以上、第二部へ続きます。