(ちょっとメモ)属性の「引用符」や「値」の省略について

最終更新日:2018年04月03日  (初回投稿日:2013年11月25日)

属性値の「引用符」を省略できる場合がありますので、その条件をまとめます。
それから「属性値」そのものを省略できる「Boolean属性」というのもあります。

属性値の「引用符」を省略できる場合

引用符とは、「 "(ダブルクォーテーション)」 や「 '(クォーテーション)」のこと 。
HTML4、HTML5は、「 " " 」と「 ' ' 」のどっちで囲んでも良いのですが、
HTML5では「属性値」に下記が含まれていなければ、引用符の省略OK。

引用符を省略できない属性値の内容
  • 空白スペース
  • <(小なり記号 less-than sign)
  • >(大なり記号 greater-than sign)
  • '(クォーテーション)
  • "(ダブルクォーテーション)
  • `(バッククォート)
  • =(イクォール)

OKな例

<input type="text">  <!--ダブルクォーテーションで囲む-->
<input type='text'>  <!--クォーテーションもOK-->
<input type=text>  <!--ここからは引用符無しでOKな例-->
<input type=number min=0 max=20 step=5>
<div id=container>
<span class=red>

NGな例

<body class=front-page home main>  <!--属性値の中に空白スペースがあります-->
<output for=na nb>  <!--属性値の中に空白スペースがあります-->
<input type=text placeholder=「18<」か「"20"」を記入してください>  <!--NG記号-->

こうして見ると、属性値を複数「半角スペース」で区切って指定する時が要注意ですね。
そんな時はちゃんと「 " " 」か「 ' ' 」で囲むこと。

NG記号は、上の例のように placeholder属性くらいでしか使わないかもね。

「値」を省略できる Boolean(ブーリアン)属性

Boolean(ブーリアン)属性は、値が true(真)か false(偽)しかない属性。「論理属性」とも呼ばれます。
この属性は、値がtrueにするときしか使いません。falseなら指定不要。
というわけで、属性値を省略してOK。(例:<input type="radio" checked>)

属性名を値として指定したり(例:<input type="radio" checked="checked">)
空文字列を指定(例:<input type="radio" checked="">) しても「true」です。

HTML5のBoolean属性は下記のものがあります。

W3Cのバリデートサイト「Markup Validation Service」

作ったHTML文書が正しいかどうか、バリデートしてくれるサービスがW3Cにあります。

クリックで別ウィンドウで開きます。

「Address:」の入力欄にサイトのURLを入れて、Check ボタンを押すだけ。
問題箇所があれば「何行目のどの要素がこうだから」と解説まで出してくれます。

問題が無ければ、このような画面になります。

次回予告

次回からは「他のコンテンツの組み込み」のための要素を使っていきましょう。
すでに登場した<img>もこのカテゴリーです。
まずは、この<img>要素にリンク領域を複数作ることができる<map>要素を使ってみます。

関連記事
このエントリーをはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーロリポップ!です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

はじめまして

転職考えてHTMLの勉強を最近始めた40前の男です。(笑)
こちらのサイトにはずいぶんお世話になっています。
[1]から初めて2~3ヶ月程でここまできました。

ざっと入力して感覚を掴んだ程度でまだまだ自分の力になっているという所までは行けてないのですが。

大量にあるであろう情報を丁寧に纏めておられ感服します。

大変かとはおもいますが頑張ってください応援しています!

Re: はじめまして

Akira360さん
コメントありがとうございます。励みになります!

じつは....
読んでくださったこの記事までは、最近新しい情報を加えて修正したものですが、
次回からの [61] イメージマップ から、記事が古い情報のままです。
すみません。時間が取れ次第、修正するつもりですが
記事が「古い(かも)」と言うことを念頭に置いて見てやってください。
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2023/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.