Difference between revisions of "Section (HTML element)"

From Wiki @ Karl Jones dot com
Jump to: navigation, search
(→‎Semantic element)
(→‎See also)
 
Line 31: Line 31:
  
 
A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.
 
A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.
 +
 +
Example:  Article with multiple sections ==
 +
 +
<nowiki> <article>
 +
<header>
 +
  <h2>Apples</h2>
 +
  <p>Tasty, delicious fruit!</p>
 +
</header>
 +
<p>The apple is the pomaceous fruit of the apple tree.</p>
 +
<section>
 +
  <h3>Red Delicious</h3>
 +
  <p>These bright red apples are the most common found in many
 +
  supermarkets.</p>
 +
</section>
 +
<section>
 +
  <h3>Granny Smith</h3>
 +
  <p>These juicy, green apples make a great filling for
 +
  apple pies.</p>
 +
</section>
 +
</article></nowiki>
 +
 +
 +
Source: https://www.w3.org/TR/html5/sections.html#the-section-element
 +
 +
Example: http://code.karljones.com/html/article-header-sections.html
  
 
== See also ==
 
== See also ==

Latest revision as of 09:55, 26 April 2016

In HTML5, the section element represents a unit of content within a document, typically with a heading.

Semantic element

section is a container for holding further content.

It has semantic meaning: "Contents are a section of content. This element part of a larger page structure. This element may contain sub-structures."

The section element represents a generic section of a document or application.

  • A section, in this context, is a thematic grouping of content.
  • The theme of each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.

Examples of sections would be:

  • Chapters
  • The various tabbed pages in a tabbed dialog box
  • The numbered sections of a thesis

A Web site's home page could be split into sections for an introduction, news items, and contact information.

Article element

Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.

Section is not a generic container element

The section element is not a generic container element.

When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.

A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

Example: Article with multiple sections == 

	<article>
	 <header>
	  <h2>Apples</h2>
	  <p>Tasty, delicious fruit!</p>
	 </header>
	 <p>The apple is the pomaceous fruit of the apple tree.</p>
	 <section>
	  <h3>Red Delicious</h3>
	  <p>These bright red apples are the most common found in many
	  supermarkets.</p>
	 </section>
	 <section>
	  <h3>Granny Smith</h3>
	  <p>These juicy, green apples make a great filling for
	  apple pies.</p>
	 </section>
	</article>


Source: https://www.w3.org/TR/html5/sections.html#the-section-element

Example: http://code.karljones.com/html/article-header-sections.html

See also

External links

Retrieved from "http://wiki.karljones.com/index.php?title=Section_(HTML_element)&oldid=13957"