html
投稿日
投稿者 dennie

HTML基本 – 基本的なタグ

基本的なhtmlタグを紹介します。

タイトル

h1からh6要素はタイトルを表します。
h1が一番大きな見出し、h6が一番小さな見出しになります。

<h1>h1.あああああ</h1>
<h2>h2.あああああ</h2>
<h3>h3.あああああ</h3>
<h4>h4.あああああ</h4>
<h5>h5.あああああ</h5>
<h6>h6.あああああ</h6>

・実行結果

h1.あああああ

h2.あああああ

h3.あああああ

h4.あああああ

h5.あああああ
h6.あああああ

文章

p要素は文章を記述する時に使用します。

<p>p.これから何をすればいいのだろうか・・・</p>

・実行結果

p.これから何をすればいいのだろうか・・・

リスト

リストで表示したい場合に使用します。
番号や “・” など色々な形式が指定できます。

<ul>
  <li>li.ああああ</li>
  <li>li.いいいい</li>
</ul>

<ol>
  <li>li.ああああ</li>
  <li>li.いいいい</li>
</ol>

・実行結果

  • li.ああああ
  • li.いいいい
  1. li.ああああ
  2. li.いいいい

リンク

ハイパーリンクとして指定できます。

<a href="http://sample.com">こちら</a>

・実行結果

こちら

表

表で表現したい場合に使用します。
tableタグの中のtrタグが表示1行を表します。
1行の中のセルは、表の見出しを表すタグとしてthタグ、表の値を表すタグとしてtdタグが存在します。

<table class="table">
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th>Handle</th>
    </tr>
    <tr>
      <th>1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
</table>

・実行結果

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

画像

画像を表示できます。
imgタグには閉じタグがありません。
イメージはgif、jpeg、pngの三種類が使用できます。

<img src="https://dennie.tokyo/it/wp-content/themes/dennie/P1011152.jpg" width="256" height="128" alt="画像1">

・実行結果
画像1

そのまま

code

ソースコードを表示したい場合に使用します。
後に説明するpreタグで囲うとスペースや改行を認識します。

<code>そのまま表示されます。</code>

・実行結果

そのまま表示されます。

pre

整形されて文章を表示したい場合に使用します。
codeタグで例を示したので割愛します。

シンプルなタグ

span

後に説明しますが、インライン要素として扱いたい場合に使用します。

<span>span.ただの文字</span>

・実行結果

span.ただの文字

div

後に説明しますが、ブロック要素として扱いたい場合に使用します。

<div>divはブロック要素</div>

・実行結果

divはブロック要素

オリジナル

自分オリジナルのタグは使用できません。

最後に

htmlタグは他にも沢山あるので、新しいタグは都度調べて覚えましょう。
htmlの基本は以上となります。
次回はweb画面のスタイルを記述するcssについて説明します。

次回

CSS基本 – 超入門

▼ HTMLに関する記事の一覧をみる

HTML目次一覧

HTML – 目次

© DeNnie.Lab All Rights Reserved.