Webヒント

引用を示す要素

引用を示す場合は、ブロックレベル要素を含む・含まないに応じてblockquote要素、またはq要素を用いることになります。
blockquoteやq要素では、cite属性で引用元のURI（リソースの所在や名前）と、title属性で引用元の説明情報を示すことになっているのですが、主要な視覚環境のUAにおいてはcite属性、title属性で示された情報が視覚的に表され、それをハイパーリンク等で利用できるようにはなっていません。
そこで、cite要素と組み合わせて視覚的に出典元や引用元を示したい場合、blockquote要素やq要素内に引用ではない出典元・引用元についての情報を含めることなく、それでいて引用のブロックとして関連付けられるようなマーク付けをおこなうのが妥当です。

＜cite>HTML Specification＜/cite>にはcite要素について 引用や他のソースへの参照を含む引用や他のソースへの参照を含む と説明があります。

HTML Specification for the cite element. Contains a citation or a reference to other sources

<dl class="quote">
<dt>Barack Obama氏の<cite>2004年7月27日 民主党全国大会 基調演説</cite>より抜粋</dt>
<dd>
    <blockquote title="Barack Obama氏の2004年7月27日 民主党全国大会 基調演説">
    <p>I say to them tonight, there's not a liberal America and a conservative America.</p>
    <p>There's the United States of America.</p>
    <p>There's not a black America and white America and Latino America and Asian America.</p>
    <p>There's the United States of America.</p>
    </blockquote>
</dd>
</dl>

Barack Obama氏の2004年7月27日 民主党全国大会 基調演説より抜粋

I say to them tonight, there's not a liberal America and a conservative America.

There's the United States of America.

There's not a black America and white America and Latino America and Asian America.

There's the United States of America.

classセレクタ

■セレクタの書式・<style>スタイルを適用する対象

書式

.クラス名 {プロパティ名:値;}

適用対象

クラス名を付けた要素

cssで〇印リストlist-style-typeなど

• いちご
• 人参
• サンダル

list-styleのcss

＜style＞タグは、スタイルシートを記述する際に使用

＜div＞タグは、ひとかたまりの範囲として定義する際に使用

divとsectionとarticle要素それぞれの特徴

div要素

div要素は最も汎用的な要素で、特別ではない意味を持っています。つまり、意味的に関係していないコンテンツをまとめる、ということになります。
div要素内のコンテンツは本質的に無意味なものであるため、多用ぜずに限られた箇所のみに使うべきです。

section要素

section要素はdiv要素より、目的がはっきりしています。意味的に有意義な方法でグループ化されたコンテンツの一般的なセクションに適用され、見出し要素の利用が強く推奨されています。
section要素のコンテンツは有意義であるため、テーマを持っているべきです。section要素のテーマとは、sectionタグのすぐ後に続いて定義されるべきです。

article要素

article要素はsection要素より、さらに使い方が特定されます。意味的に関連したコンテンツのセクションに適用します。そして、このコンテンツのセクションは独立しているべきです。つまりarticle要素のコンテンツは、ページの残りから隔離されても意味を持つことが可能であることを意味します。
article要素のよくある目的は、コンテンツのマーキングです。例えば、ブログの記事にマークを付けます。

class グローバル属性

class グローバル属性 は、要素のクラスを空白区切りで並べたリストで、大文字小文字を区別します。クラスは CSS の クラスセレクター や JavaScript の DOM メソッド document.getElementsByClassName といった関数により、特定の要素を選択したり特定の要素にアクセスしたりすることを可能にします。

Japanプレゼンテーション

<img src="image.png" role="presentation" alt="" />

<h1><span></span>CSS Gradient Text</h1>

<h1><span role="presentation"></span>CSS Gradient Text</h1>

<table role="presentation">
<tr>
<td>ヘッダー</td>
</tr>
<tr>
<td>メイン</td>
</tr>
<tr>
<td>フッター</td>
</tr>
</table>