概要
この記事は筆者が【世界で70万人が受講】Web Developer Bootcamp 2023（日本語版）を受講て学習した内容を簡潔にまとめています。
今回の記事ではHTMLの超基本的な要素と属性について記載します。
- htmlを書くための準備
- hタグ
- pタグ
- bタグ
- ul,olタグ
- aタグ
- imgタグ
htmlを書くための準備
コンピューターにhtmlファイルとして認識するために必要なのは拡張子が *.htmlなファイルです。
またファイル内に、
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
と記載します。この文章はHTMLを記載するための雛形のようなもので、VSコードだと! + tabと打つことで入力補完してくれます。
hタグ
見出しです。
<h2>aaa</h2>
h1>h2>h3 の順に大きな見出しになります。
pタグ
改行です。
<p>ニワトリ</p>
コード上で改行していても、pタグを入れていないと実際に表示される画面上では改行されません。
例えば以下のようなコードの場合は、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>概要</h1>
ニワトリ。
美味しい。
</body>
</html>
こんな感じでつながってしまいます。
以下のようにPタグで囲むことで改行されます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>概要</h1>
<P>ニワトリ。</P>
<P>美味しい。</P>
</body>
</html>
ちなみにですがhタグはその行を専有するのでpタグを入れる必要はありません。
bタグ
bタグは太字です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>概要</h1>
<P><b>ニワトリ。</b></P>
<P>美味しい。</P>
</body>
</html>
ニワトリ部分が気持ち太くなりました。
ul,olタグ
リストです。
ul=順序のないリスト
ol=順序付きのリスト
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>概要</h1>
<P><b>ニワトリ。</b></P>
<P>美味しい。</P>
<h2>品種</h2>
<ul>
<li>大軍鶏</li>
<li>小軍鶏</li>
<!-- ul,olの中には必ずli要素で囲んだ文字列を記載します -->
</ul>
<li>地鶏グループ</li>
<ol>
<li>土佐地鶏</li>
<li>三重地鶏</li>
</ol>
</body>
</html>
このul,olを更にネストすることも可能です。
aタグ
リンクです。ローカル内の別ファイルへのリンクを貼ったり、web上のリンクを貼ることもできます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>概要</h1>
<P><b>ニワトリ。</b></P>
<P>美味しい。</P>
<h2>品種</h2>
<ul>
<li>大軍鶏</li>
<li>小軍鶏</li>
<!-- ul,olの中には必ずli要素で囲んだ文字列を記載します -->
</ul>
<li>地鶏グループ</li>
<ol>
<li>土佐地鶏</li>
<li>三重地鶏</li>
</ol>
<a href="https://www.google.con">グーグル</a>
<p><a href="./test.html">test</a></p>
</body>
</html>
web上の場合はhttp:// が必要になり、ローカルのファイルなら相対パスが必要になります。
imgタグ
画像を埋め込めます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>概要</h1>
<P><b>ニワトリ。</b></P>
<img src="../Downloads/202001290095_box_img1_A.jpg" alt="ニワトリという和名は「庭に飼う鳥」、つまり家禽という意味から名づけられた">
<P>美味しい。</P>
<h2>品種</h2>
<ul>
<li>大軍鶏</li>
<li>小軍鶏</li>
<!-- ul,olの中には必ずli要素で囲んだ文字列を記載します -->
</ul>
<li>地鶏グループ</li>
<ol>
<li>土佐地鶏</li>
<li>三重地鶏</li>
</ol>
<a href="https://www.google.con">グーグル</a>
<p><a href="./test.html">test</a></p>
</body>
</html>
今回はネット上の画像のアドレスを貼り付けていますが、ローカルにあるイメージのパスを貼ることもできます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>概要</h1>
<P><b>ニワトリ。</b></P>
<img src="../Downloads/202001290095_box_img1_A.jpg" alt="ニワトリという和名は「庭に飼う鳥」、つまり家禽という意味から名づけられた">
<p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Red_Junglefowl_%28male%29_-_Thailand.jpg/220px-Red_Junglefowl_%28male%29_-_Thailand.jpg"
alt="ニワトリ"></p>
<P>美味しい。</P>
<h2>品種</h2>
<ul>
<li>大軍鶏</li>
<li>小軍鶏</li>
<!-- ul,olの中には必ずli要素で囲んだ文字列を記載します -->
</ul>
<li>地鶏グループ</li>
<ol>
<li>土佐地鶏</li>
<li>三重地鶏</li>
</ol>
<a href="https://www.google.con">グーグル</a>
<p><a href="./test.html">test</a></p>
</body>
</html>
"alt"の部分はサイトのアクセシビリティを向上させるためのものです。
終わりに
かなり簡素な解説になりましたが、参考になれば幸いです。