プログラミング基礎 PR

HTMLの基本

  /
HTML
記事内に商品プロモーションを含む場合があります

この記事はHTML(Hypertext Markup Language、ハイパーテキスト・マークアップランゲージ)について紹介する記事です。

HTMLはウェブサイトのコンテンツの構造を作るために使うコードです。

目次
  1. HTMLの使用方法
  2. 要素の入れ子
  3. HTMLの例
  4. 画像
  5. テキストのマークアップ

HTMLの使用方法

<p> HTMLの使用方法 </p>

HTMLではタグと呼ばれる記号をしようします。今回の例の場合は<p>です。

タグは開始タグ(<p>)と終了タグ(</p>)で要素を囲みます。

要素には属性(Attribute)を設定することができます。

<p class="color-attribute"> HTMLの使用方法 </p>

タグに属性を設定をすることができます。classが属性の名前、color-attributeが属性の値です。

要素の入れ子

タグは入れ子(ネスト)することができます。

<p>HTMLの使用は<strong>とっても</strong>簡単です。</p>

この例の場合は「とっても」の文字が強調されて表示されます。

HTMLの例

もう少し複雑な例を考えてみましょう。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>HTMLの使用</title>
 </head>
 <body>
  <img src="path/example.img" alt="HTML image">
 </body>
</html>

 

<!DOCTYPE html>は文書型宣言です。文章を正しく動作するために必要です。

<html></html>はページのすべてのコンテンツを囲みます。

<head></head>はページに表示しないコンテンツを含めておきます。

<meta charset="utf-8">は文字コードをutf-8に設定しています。基本的にutf-8で問題ないです。

<title></title>はページのタイトルを指定します。

<body></body>はページに訪れた利用者に表示したいすべてのコンテンツが含まれます。

画像

<img>を使用して画像を埋め込みます。

<img src="images/example.png" alt="imgの使用例">

srcに画像ファイルのパスを設定する。

altは画像を見られない人に向けて説明するテキストを指定します。

srcのパスを間違えた時もaltに設定したテキストが表示されます。

テキストのマークアップ

見出し

<h1>メインタイトル</h1>
<h2>最上位の見出し</h2>
<h3>小見出し</h3>
<h4>孫見出し</h4>

段落

最初の例に出てきた<p>要素は段落を示しています。

リスト

リストには二つの種類があります。

  1. 順序なしリストは、TODOのようにアイテムの順番が特に関係ない時に使います。順序なしリストは<ul>要素で囲みます。
  2. 順序付きリストは、料理レシピのようにアイテムの順番が関係ある時に使います。順序付きリストは<ol>要素で囲みます。
<p>順序なしリスト「TODO」</p>

<ul>
 <li>HTMLを勉強する</li>
 <li>CSSを勉強する</li>
 <li>JavaScriptを勉強する</li>
</ul>

<p>順序付きリスト「料理レシピ」</p>

<ul>
 <li>野菜を切る</li>
 <li>肉を炒める</li>
 <li>盛り付ける</li>
</ul>

リンク

リンクを実装するには<a>を使用します。

<a href="https://kumanatsu.com/">ブログのトップページに移動</a>

hrefはリンク先のURLを指定します。

＜a></a>の間にはリンクする文字を指定します。

 

関連記事