Presentational elements and attributes - Revision history

WWC: Fix broken hyperlink

2010-04-28T19:34:32Z

Fix broken hyperlink

← Older revision		Revision as of 19:34, 28 April 2010
Line 1:		Line 1:
	The HTML5 spec lists some [http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete~~-features~~.html#obsolete~~-features~~ obsolete elements and attributes], some of which the advice given is, for attributes "Use CSS instead", and for elements:		The HTML5 spec lists some [http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#obsolete obsolete elements and attributes], some of which the advice given is, for attributes "Use CSS instead", and for elements:

	<blockquote><p>Use appropriate elements and/or CSS instead.</p>		<blockquote><p>Use appropriate elements and/or CSS instead.</p>

Zcorpan at 07:04, 23 February 2010

2010-02-23T07:04:07Z

← Older revision		Revision as of 07:04, 23 February 2010
Line 1:		Line 1:
	The HTML5 spec lists some [http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete-features.html#obsolete-features obsolete elements and attributes], some of which the advice given is "Use CSS instead.".		The HTML5 spec lists some [http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete-features.html#obsolete-features obsolete elements and attributes], some of which the advice given is, for attributes "Use CSS instead", and for elements:

	This page is intended to give advice about specific CSS features that can be used instead of each such element or attribute.		<blockquote><p>Use appropriate elements and/or CSS instead.</p>
			<p>For the <code>s</code> and <code>strike</code> elements, if they are marking up a removal from the element, consider using the <code>del</code> element instead.</p>
			<p>Where the <code>tt</code> element would have been used for marking up keyboard input, consider the <code>kbd</code> element; for variables, consider the <code>var</code> element; for computer code, consider the <code>code</code> element; and for computer output, consider the <code>samp</code> element.</p>
			<p>Similarly, if the <code>u</code> element is being used to indicate emphasis, consider using the <code>em</code> element; if it is being used for marking up keywords, consider the <code>b</code> element; and if it is being used for highlighting text for reference purposes, consider the <code>mark</code> element.</p>
			<p>See also the [http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#usage-summary text-level semantics usage summary] for more suggestions with examples.</p></blockquote>

			This page is intended to give further advice about specific CSS features that can be used instead of each such element or attribute.

	You should think about whether there is a semantic element that matches the intent of your use of a presentational element. If there is such an element, you should use it, and if it doesn't already have a default styling that you like, then you can use CSS from the tables below to make it look like you want. You may also have to reset any other properties that some elements have by default. If there is no appropriate semantic element for the purpose, then you should probably use [http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-div-element div] or [http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-span-element span] instead.		You should think about whether there is a semantic element that matches the intent of your use of a presentational element. If there is such an element, you should use it, and if it doesn't already have a default styling that you like, then you can use CSS from the tables below to make it look like you want. You may also have to reset any other properties that some elements have by default. If there is no appropriate semantic element for the purpose, then you should probably use [http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-div-element div] or [http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-span-element span] instead.

Zcorpan: /* Some semantic elements */

2009-11-27T11:56:24Z

Some semantic elements

← Older revision		Revision as of 11:56, 27 November 2009
Line 46:		Line 46:
	\|[http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-p-element p]		\|[http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-p-element p]
	\|A paragraph.		\|A paragraph.
	\|-
	~~\|[http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-dialog-element dialog]~~
	~~\|A conversation, meeting minutes, a chat transcript, a dialog in a screenplay, an instant message log, or some other construct in which different players take turns in discourse.~~
	\|-		\|-
	\|[http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-blockquote-element blockquote]		\|[http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-blockquote-element blockquote]

Zcorpan at 11:52, 27 November 2009

2009-11-27T11:52:53Z

← Older revision		Revision as of 11:52, 27 November 2009
Line 1:		Line 1:
	The ~~HTML 5~~ spec lists some [http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete-features.html#obsolete-features obsolete elements and attributes], some of which the advice given is "Use CSS instead.".		The HTML5 spec lists some [http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete-features.html#obsolete-features obsolete elements and attributes], some of which the advice given is "Use CSS instead.".

	This page is intended to give advice about specific CSS features that can be used instead of each such element or attribute.		This page is intended to give advice about specific CSS features that can be used instead of each such element or attribute.

Zcorpan: /* Presentational attributes */

2009-10-28T08:27:59Z

Presentational attributes

← Older revision		Revision as of 08:27, 28 October 2009
Line 300:		Line 300:
	\|-		\|-
	\|border on table elements		\|border on table elements
	\|'border-width' on table ~~and on the table's td and th~~		\|'border-width' on table
	\|-		\|-
	\|cellpadding on table elements		\|cellpadding on table elements

Zcorpan at 16:01, 25 June 2009

2009-06-25T16:01:05Z

← Older revision		Revision as of 16:01, 25 June 2009
Line 3:		Line 3:
	This page is intended to give advice about specific CSS features that can be used instead of each such element or attribute.		This page is intended to give advice about specific CSS features that can be used instead of each such element or attribute.

	You should think about whether there is a semantic element that matches the intent of your use of a presentational element. If there is such an element, you should use it, and if it doesn't already have a default styling that you like, then you can use CSS from the tables below to make it look like you want. You may also have to reset any other properties that some elements have by default. If there is no appropriate semantic element for the purpose, then you should probably use div or span instead.		You should think about whether there is a semantic element that matches the intent of your use of a presentational element. If there is such an element, you should use it, and if it doesn't already have a default styling that you like, then you can use CSS from the tables below to make it look like you want. You may also have to reset any other properties that some elements have by default. If there is no appropriate semantic element for the purpose, then you should probably use [http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-div-element div] or [http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-span-element span] instead.

	For example, if you have a page such as:		For example, if you have a page such as:

Zcorpan at 15:58, 25 June 2009

2009-06-25T15:58:58Z

← Older revision		Revision as of 15:58, 25 June 2009
Line 30:		Line 30:

	Now, search engines and assistive technologies such as screen readers will know that it is a heading and will be able to make more sense of your page.		Now, search engines and assistive technologies such as screen readers will know that it is a heading and will be able to make more sense of your page.

			== Some semantic elements ==

			{\| border="1"
			\|-
			!Element
			!Represents
			\|-
			\|[http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements h1, h2, h3, h4, h5, h6]
			\|The heading for its section.
			\|-
			\|[http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-address-element address]
			\|Contact information for its nearest article or body element ancestor.
			\|-
			\|[http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-p-element p]
			\|A paragraph.
			\|-
			\|[http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-dialog-element dialog]
			\|A conversation, meeting minutes, a chat transcript, a dialog in a screenplay, an instant message log, or some other construct in which different players take turns in discourse.
			\|-
			\|[http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-blockquote-element blockquote]
			\|A section that is quoted from another source.
			\|-
			\|[http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-ol-element ol]
			\|A list of items, where the items have been intentionally ordered, such that changing the order would change the meaning of the document.
			\|-
			\|[http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-ul-element ul]
			\|A list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the document.
			\|-
			\|[http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-dl-element dl]
			\|An association list consisting of zero or more name-value groups (a description list).
			\|-
			\|[http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-q-element q]
			\|Some phrasing content quoted from another source.
			\|-
			\|[http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-cite-element cite]
			\|The title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, etc). This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing.
			\|-
			\|[http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-em-element em]
			\|Stress emphasis of its contents.
			\|-
			\|[http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-strong-element strong]
			\|Strong importance for its contents.
			\|-
			\|[http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-small-element small]
			\|Small print or other side comments.
			\|-
			\|[http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-mark-element mark]
			\|A run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. When used in a quotation or other block of text referred to from the prose, it indicates a highlight that was not originally present but which has been added to bring the reader's attention to a part of the text that might not have been considered important by the original author when the block was originally written, but which is now under previously unexpected scrutiny. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its likely relevance to the user's current activity.
			\|-
			\|[http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-dfn-element dfn]
			\|The defining instance of a term.
			\|-
			\|[http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-abbr-element abbr]
			\|An abbreviation or acronym, optionally with its expansion.
			\|-
			\|[http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-time-element time]
			\|A precise date and/or a time in the proleptic Gregorian calendar.
			\|-
			\|[http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-code-element code]
			\|A fragment of computer code. This could be an XML element name, a filename, a computer program, or any other string that a computer would recognize.
			\|-
			\|[http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-var-element var]
			\|A variable. This could be an actual variable in a mathematical expression or programming context, or it could just be a term used as a placeholder in prose.
			\|-
			\|[http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-samp-element samp]
			\|(Sample) output from a program or computing system.
			\|-
			\|[http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-kbd-element kbd]
			\|User input (typically keyboard input, although it may also be used to represent other input, such as voice commands).
			\|-
			\|[http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-sub-and-sup-elements sup]
			\|A superscript.
			\|-
			\|[http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-sub-and-sup-elements sub]
			\|A subscript.
			\|-
			\|[http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-i-element i]
			\|A span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized.
			\|-
			\|[http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-b-element b]
			\|A span of text to be stylistically offset from the normal prose without conveying any extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is boldened.
			\|-
			\|[http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-ins-element ins]
			\|An addition to the document.
			\|-
			\|[http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-del-element del]
			\|A removal from the document.
			\|-
			\|}

	== Presentational elements ==		== Presentational elements ==

Zcorpan: /* Presentational attributes */

2009-06-25T15:10:19Z

Presentational attributes

← Older revision		Revision as of 15:10, 25 June 2009
Line 138:		Line 138:
	\|-		\|-
	\|align on h1—h6 elements		\|align on h1—h6 elements
	\|'text-align' on ~~h1-h6~~		\|'text-align' on h1—h6
	\|-		\|-
	\|align on iframe elements		\|align on iframe elements

Zcorpan at 10:41, 25 June 2009

2009-06-25T10:41:12Z

← Older revision		Revision as of 10:41, 25 June 2009
Line 28:		Line 28:
	h1 { font-size:larger; margin:0 }		h1 { font-size:larger; margin:0 }
	</pre>		</pre>

			Now, search engines and assistive technologies such as screen readers will know that it is a heading and will be able to make more sense of your page.

	== Presentational elements ==		== Presentational elements ==

Zcorpan: /* Presentational elements */

2009-06-25T02:15:16Z

Presentational elements

← Older revision		Revision as of 02:15, 25 June 2009
Line 58:		Line 58:
	\|-		\|-
	\|spacer		\|spacer
	\|'margin', 'padding'		\|'margin', 'padding', 'text-indent'
	\|-		\|-
	\|strike		\|strike