You are on page 1of 21

Grouping Content

 new additions to the HTML5 specification in a number of new elements added


to aid in grouping content
The <div> element

 the most common container for groups of HTML elements was the <div>. It
represents a generic block of content and is designed to be used with classes
and ids to give structure to documents
The <header> element

 the editor of the HTML standard, Ian Hickson, did a survey of the web and
identified common markup patterns. Some of these he captured as new HTML
elements.
The <hgroup> elemen

 The <hgroup> element is designed to group together multiple levels of


headings that have some logical connection, for example, subheadings,
alternative titles, or taglines.
The <nav> element

 The <nav> element represents a navigation section of the page, containing a


list of links to other pages or site sections within the site or application
The <section> element

 The <section> element is used to represent a section of a document or


application.
The <article> element

 use an <article> element to mark up “independent content.


 n examples such as a blog post, a forum post, a movie review, a news article,
or an interactive widget.
The <hr> elemen

 The <hr> element creates a horizontal rule across the page. It is an empty
element, rather like the <br> element.
The <blockquote> element

 When you want to quote a passage from another source, you should use the
<blockquote> element.
using the cite attribute with the
<blockquote> element
 You can use the cite attribute on the <blockquote> element to indicate the
source of the quote.
The <aside> element

 The <aside> element is used to mark up related content such as pull quotes,
sidebars, and ads.
The <footer> element

 A common usage of the footer is for legal copy


The <address> element

 The <address> element is used to mark up contact information for an article


element or for the document as a whole.
working wiTH LiSTS

You can create three types of lists in HTML:


 Unordered: Like lists of bullet points
 Ordered: Use a sequence of numbers or letters instead of bullet points
 Definition: Enable you to specify a term and its definition
 using the <ul> element to Create unordered Lists.
 Each bullet point or line you want to write should then be contained between
opening <li> tags and closing </li> tags.
 ordered Lists
 Using the start Attribute to Change the Starting number in Ordered Lists
 Count Down in Your Ordered Lists with the reversed Attribute
 Specify a Marker with the type Attribute
 definition Lists
 Definition lists are contained inside the <dl> element. The <dl> element then
contains alternating <dt> and <dd> elements. The content of the <dt> element is
the term you define. The <dd> element contains the definition of the previous <dt>
element.
 nesting Lists
Fine-tuning Your Text
 The <span> element
 The <span> element is a close cousin to the <div>. It’s a generic element with
no semantic value that you can use to group inline elements.
 The <em> element
 The content of an <em> element is intended to be a point of emphasis in your
document, and it usually displays in italicized text.
 The <strong> element
 The <strong> element is intended to show strong emphasis for its content—
stronger emphasis than the <em> element
 The <b> element
 The <i> element
 The <small> element
 The <q> element
 The <dfn> element
 The <abbr> element
 The <time> element
 The <code> element
 <figure> and <figcaption> elements
 The <var> element
 The <samp> element
 The <kbd> element
 The <sup> element
 The <sub> element
 The <mark> element
Editing text

The <ins> element for when you want to add text (usually shown underlined in a
browser)
The <del> element for when you want to delete some text (usually shown crossed
out in a browser)
Using character entities for special
characters
Comments

<!-- comment goes here -->

You might also like