Chapter-6(HTML5)

Description

This is my HTML5 notes, Hope you like it

Shared by: ashish2expert
-
Stats
views:
21
posted:
1/7/2012
language:
pages:
10
Document Sample
scope of work template
							6. TEXT LEVEL SEMANTICS
        6.1. The a element

This element defines a hyperlink if it has href attribute otherwise represents a placeholder
where a link might be placed.

Attributes support:

href:- This is the single required attribute for anchors defining a hypertext source link. It
indicates the link target, either a URL or URL fragment that is the name preceded by a hash
mark (#).

hreflang:- Defines language.

media:- Defines media value.

ping:- Defines pinging.

rel:- This attribute defines a relationship of the linked document to the current document.
The attribute must be a space-separated list of link type values. The most common use of this
attribute is to specify a link to an external style sheet: the rel attribute is set to “stylesheet”.
For external link use external link type value for rel.

type:- This attribute is used to define the type of context linked to. The value of the attribute
should be MIME type such as text/html, text/css and so on. The most common current value
is text/css.

target:- The value assigned to this attribute display the result when hyperlinks or forms cause
navigation. Some special keywords are assigned to this attribute which are described below:

   •    _self: Load the result into the same HTML4 frame (or HTML5 browsing context) as the
        current one. This value is the default if the attribute is not specified.

   •    _blank: Load the result into new unnamed window

   •    _parent: Load the result into the new frame of the current browsing context. If there is
        no parent, this option behaves the same way as _self.

   •    _top: In HTML4: Load the result into the full, original window, cancelling all other
        frames. In HTML5: Load the result into the top-level browsing context. If there is no
        parent this option behaves the same way as _self.

NOTE:- The target, ping, rel, media, type, hreflang must be omitted if href attribute is
present.

Example:

<nav>
<ul>

<li><a href=”/”>Home</a></li>

<li><a href=”/news”>News</a></li>

<li><a>Examples</a></li>

</ul>

</nav>



        6.2. The em element

This element mark text that has stress emphasis. The <em> element can be nested, with each
level of nesting indicating a greater degree of emphasis.

NOTE:- Typically this element is displayed in italic type. However, it should not be used
simply to apply italic styling, use the <i> element or CSS styling. Use the <cite> element to
mark the title of the work (book, play, song etc).

The <em> element also isn’t intended to convey importance. For this purpose, use <strong>
element.

Example:

<p>In HTML5, what was previously called<em> block-level </em>content is now called <em>

flow</em> content. </p>

Output:




        6.3. The strong element

This element represents strong importance for its contents. This is look like bold element
after previewing content but <b> element is used for presentational while <strong> is for
strong importance.

Example:

<p><strong>Warning!</strong> This dungeon is dangerous.

<strong>Avoid the ducks.</strong> Take any gold you find.</p>
       6.4. The small element

This element is used to make the text font size one size smaller.

Example:

<p> This is the first sentence. <small>This whole sentence is in small letters </small></p>

or CSS alternative

<p>This is the first sentence <span style =”font-size:0.8em”> This whole sentence is in small
letters</span></p>

Output:




       6.5. The cite element

This element represents the title of a work. (e.g. a book, a paper, an essay, a poem, a score, a
script, a film, a TV show, a game, a sculpture, a painting, a theatre, a play, an opera, an
exhibition etc). This can be a work that is being quoted or referenced in detail.

A citation is not a quote (for which the <q> element is appropriate)

Example:

This is the incorrect usage, because cite is not for quotes:

<p><cite>This is wrong!</cite>, said Ian.</p>

This is still wrong, because a person is not a work:

<p><q>This is still wrong!</q>, said <cite>Ian</cite>.</p>

The correct usage doesn’t use the <cite> element

<p><q>This is correct</q>, said Ian </p>

The following is the correct use of <cite> element.

<p>More information can be found in <cite>[ISO-000]</cite></p>
       6.6. The q element

This element indicates that the enclosed text is a short inline quotation.

Example:

<p>Every time Kenny was killed, Stan will announce <q>Oh God, you/they killed
Kenny</q></p>

Output:




NOTE:- You can also use entity name for quotation which is &quot;



       6.7. The dfn element

The <dfn> element represents the defining instance of a term. The paragraph, description list
group, or section that is the nearest ancestor of the <dfn> element must also contain the
definition(s) for the term given by the <dfn> element.



       6.8. The abbr element

It represents an abbreviation or acronym. The title attribute may be used to provide an
expansion of the attribute. This attribute if specified must contain an expansion of the
abbreviation and nothing else.

Example:

<p>Tony Blair is the prime minister of the <abbr title=”United Kingdom”>UK</abbr></p>



       6.9. The time element

This element describes time on a 24 hour clock.

Attributes support:

datetime:- This attribute indicate the date and time of the element and must be a valid date
with optional time string.

pubdate:- This Boolean attribute specifies that the date and time given by the element is the
publication date of a document. The document it applies to is either the nearest ancestor
article element or the document as a whole (if there is no ancestor article element). If true,
the time element must have a corresponding date. Additionally, each time element indicating
a publication date must be the only time element that does so for that document.

Example:

<p>The concert starts at <time>20:00</time></p>

Above will output:




The following example use pubdate attribute:

<article>

<h1>Small tasks</h1>

<footer>Published <time pubdate>2009-08-30</time>.</footer>

<p>I put a bike bell on his bike.</p>

</article>



       6.10. The code element

This represents a fragment of computer code.

Example:

<p>When you call the <code>activate()</code> method on the

<code>robot Snowman</code> object, the eyes glow.</p>



       6.11. The var element

This element represents a variable in a mathematical expression or a programming context.

Example:

<p>A simple equation : <var>x</var> = <var>y</var> +2 </p>



       6.12. The samp element
The HTML Sample Text Element (<samp>) produces an inline element displayed in the
browser's default monotype font (Lucida Console). This element was intended to identify
sample output from a computer program.

Example:

<p>Regular text. <samp>This is sample text.</samp> Regular text.</p>



       6.13.   The kbd element

The <kbd> element represents user input (typically keyboard input, although it may also be
used to represent other input, such as voice commands).

Example:

<p>To make George eat an apple, press <kbd><kbd>Shift</kbd>+<kbd>F3</kbd></kbd></p>

Output:




       6.14.   The sup and sub element

Make the text superscript and subscript.



       6.15.   The i and b element

Use for italicized and bold the text. However, by using style sheet it can be restyled.



       6.16.   The mark element

This element is used to highlight text.

Example:

<p>This element is used for <mark>highlight</mark> text</p>

Output:
NOTE:-

   •   Don’t use the <mark> element for syntax highlighting, use the <span> element for
       this purpose.

   •   Do not confuse the <mark> element with the <strong> element.
       The <strong> element is used to denote spans of text of special importance, when
       the <mark>element is used to denote spans of text of special relevance.

   •   In the main text, the highlighted text typically marks text that may be of special
       relevance for the user’s current activity, like search results.



   6.17.        The ruby, rt and rp element

These elements will be described later.



       6.18.    The bdo element

The HTML Bidirectional Override Element (<bdo>) is used to override the current
directionality of text. It causes the directionality of the characters to be ignored in favour of
the specified directionality.

Attributes support:

dir:- Text direction in this element. Possible values are:

   •   ltr: Indicates that the text should go in a left-to-right direction.

   •   rtl: Indicates that the text should go in a right-to-left direction.

   •   auto: The browser decides which direction based on the element's content.

Example:

<p>This text will go left to right.</p>

<p><bdo dir="rtl">This text will go right to left.</bdo></p>

Output:
        6.19.    The bdi element

This element represents a span of text that is to be isolated from its surroundings. This
element is especially useful when embedding user-generated content with an unknown
directionality.

Example:

<ul>

<li>User <bdi>jcranmer</bdi>: 12 posts.

<li>User <bdi>hober</bdi>: 5 posts.

<li>User <bdi>‫/<إيان‬bdi>: 3 posts.

</ul>

In this example, usernames are shown along with the number of posts that the user has
submitted. If the <bdi> were not used, the username of the Arabic user would end up
confusing the text (the bidirectional algorithm would put the colon and the number "3" next
to the word "User" rather than next to the word "posts").



        6.20.    The span element

This HTML element is a generic inline container for phrasing content, which does not
inherently represent anything. It can be used to group elements for styling purposes (using
the class or id attributes), or because they share attribute values, such as lang. It should be
used only when no other semantic element is appropriate. <span> is very much like
a <div> element, but <div> is a block-level element whereas a <span> is an inline element.



        6.21.    The br element

This element represents a line break. It is useful for writing a poem or an address, where the
division of lines is significant.

Example:

<address>

Mozilla Foundation<br>

1981 Landings Drive<br>

Building K<br>
Mountain view, CA 94043-0801<br>

USA

</address>

Output:




        6.22.   The wbr element (word break opportunity)

It represents position within text where the browser may optionally break a line, though its
line-breaking rules would not otherwise create a break at that location.

Example:

The Yahoo Style Guide recommends breaking a URL before punctuation, to avoid leaving a
punctuation mark at the end of the line, which the reader might mistake for the end of the
URL.

<p>http://this<wbr>.is<wbr>.a<wbr>.really<wbr>.long<wbr>.example<wbr>.com/With<wbr>
/deeper<wbr>/level<wbr>/pages</p>

Note: The <wbr> element does not introduce a hyphen at the line break point. To make a
hyphen appear only at the end of a line, use the soft hyphen character entity (&shy;)
instead.



6.23.      The ins and del element

These elements represent a text that has been inserted and deleted in the document
respectively.

Example:

<del>This text has been deleted</del><ins> and the deleted text was replaced by this
text</ins>

Output:

						
Related docs
Other docs by ashish2expert
Chapter-6(HTML5)
Views: 27  |  Downloads: 0
Chapter-9(HTML5)
Views: 24  |  Downloads: 0
Chapter-5(HTML5)
Views: 27  |  Downloads: 0
MY HTML5 NOTES
Views: 33  |  Downloads: 0
Chapter-2(HTML5)
Views: 22  |  Downloads: 0
Chapter-3(HTML5)
Views: 47  |  Downloads: 0
Chapter-11(HTML5)
Views: 20  |  Downloads: 0
Chapter-10(HTML5)
Views: 43  |  Downloads: 0
Chapter-7(HTML5)
Views: 24  |  Downloads: 0
Chapter-4(HTML5)
Views: 25  |  Downloads: 0