HTMLの基本

  • HTML
  • 基本
  • タグ
  • coder's high

投稿日2015/01/17

HTMLの基本を説明していきます。構成、タグの種類など。HTML5を基本として明記します。

HTMLの基本

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>
  • DOCTYPEは宣言
  • <html></html>で囲む
  • <head></head>はページ上に表示させない情報
  • <head></head>には最低meta charset="UTF-8", titleを書く
  • <body></body>の中にページ上に表示させる情報を書く

タグ

<p>あいうえお</p>
  • 情報、文字はタグで囲う

タグの種類

html

<html></html>
  • すべてを囲う
<head></head>
  • 情報

body

<body></body>
  • ページ上に表示させる部分

h1

<h1>見出し</h1>
  • 見出しを囲う
  • h1〜h6まである

p

<p>段落</p>
  • 段落

ul > li

<ul>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
</ul>
  • リスト

dl > dt, dd

<dl>
    <dt>定義されたもの</dt>
    <dd>定義されたものの詳細・内容</dd>
    <dd>定義されたものの詳細・内容</dd>
    <dd>定義されたものの詳細・内容</dd>
</dl>
  • 定義リスト

a

<a href="http://codershigh.org">codershighのサイトを見る</a>
  • リンク
  • 囲まれた要素をクリックするとhrefに挿入されているURLに移動する

section

<section>
    <h1>見出し</h1>
    <p>説明</p>
</section>
  • 見出し > 説明などの構文を囲う
  • hタグ（見出し）と内容（pタグに限らない）が必要

main

<main>
    <section>
        <h1>見出し</h1>
        <p>説明</p>
        <section>
            <h2>見出し</h2>
            <p>説明</p>
        </section>
    </section>
</main>
  • メインコンテンツを囲う

div

<div>
    <p>説明</p>
    <p>説明</p>
    <p>説明</p>
</div>
  • 見出し > 説明などの構文にならないとき、ブロックを作るために使う

small

<small>Copyright (C) 2015 ○○○○ All Rights Reserved. </small>
  • コピーライトなどを囲う

img

<img src="/img/example.jpg" alt="海">
  • 画像の挿入
  • src="画像のパス"
  • alt="画像の代替テキスト"

Tags

Date

  1. 2015年 (14)
    1. 3月 (2)
    2. 2月 (3)
    3. 1月 (9)