Semantic HTML Code Prepared by: Sanjay Raval |  http:// www.usableweb.in /
What is semantic HTML coding? HTML was originally intended as a means of describing the content of a document, not as a me...
Why is semantic code important? <ul><li>Without explaining what a piece of content is, a computer has no way of identifyin...
Elements and tags  An  element  is a construct consisting (usually) of an opening tag, some optional attributes, some cont...
Attributes  Attributes  appear within tags, and they can only contain the value of the attribute, for instance: <p class=&...
Divs and spans  A  div  (short for “division”) is used for marking out a block of content, such as the main content block ...
Divs and spans A  span  is used for marking out sections  within  a block element and sometimes inside another inline elem...
Block and inline elements  To oversimplify things a little, every element in (X)HTML is contained within a box, and that b...
Id and class attributes The id attribute is used to identify elements and mark up specific functional areas of a website, ...
Structure of an xhtml document First we see a doctype declaration. A doctype declaration provides an indication as to what...
Doctype declaration There are three XHTML doctypes available.  The XHTML doctypes are Strict, Transitional, and Frameset. ...
Using the Right Tag
Headings These tags are good for creating titles or section headings.  Headings are defined with the  <h1>  to  <h6>  tags...
Line breaks and horizontal rules The  <br>  tag is used when you want to break a line, but don’t want to start a new parag...
Paragraphs Use the  paragraph  tag when you want to break up two streams of information into separate thoughts.  Don’t use...
Lists Three list types are available in current (X)HTML versions: unordered lists <ul>, ordered lists <ol>, and definition...
List – Unordered list <ul> Lists follow a common skeleton every time — an outer container tag, and a new tag for each bull...
List – Ordered list <ol> If you want your list to be ordered instead of unordered, it’s a simple matter of just substituti...
List – Definition list <dl> There is this third list type, useful for information that comes in pairs.  The definition lis...
Upcoming SlideShare
Loading in …5
×

Semantically Correct And Standards Compliance Html

2,914 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,914
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
20
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Semantically Correct And Standards Compliance Html

  1. 1. Semantic HTML Code Prepared by: Sanjay Raval | http:// www.usableweb.in /
  2. 2. What is semantic HTML coding? HTML was originally intended as a means of describing the content of a document, not as a means to make it appear visually pleasing. Semantic code returns to this original concept and encourages people to write code that describes the content rather than how that content should look. For example, the title of a page could be coded like this: <font size=&quot;6&quot;><b>This is the page title</b></font> This would make the title large and bold giving it the appearance of a page title, but there is nothing that describes it as a title in the code. This means a computer is unable to identify this as being the page title. To write the same title semantically so that a computer understands that this is a title, you would use the following code: The appearance of your heading can then be defined in a separate CSS file without interfering your descriptive (semantic) HTML code. <h1>This is the page title</h1>
  3. 3. Why is semantic code important? <ul><li>Without explaining what a piece of content is, a computer has no way of identifying it. </li></ul><ul><li>The ability for a computer to be able to understand your content is important for a number of </li></ul><ul><li>reasons: </li></ul><ul><li>Many visually impaired people rely on speech browsers to read pages back to them. These programs cannot interpret pages very well unless they are clearly explained. In other words semantic code aids accessibility </li></ul><ul><li>Search engines need to understand what your content is about in order to rank you properly on search engines. Semantic code tends to improve your placement on search engines, as it is easier for the &quot;search engine spiders&quot; to understand. </li></ul><ul><li>However, semantic code has other benefits too: </li></ul><ul><li>Semantic code is shorter and so downloads faster. </li></ul><ul><li>Semantic code makes site updates easier because you can apply design style to headings across an entire site instead of on a per page basis. </li></ul><ul><li>Semantic code is easier for people to understand too so if a new coder picks up the code he can learn it much faster. </li></ul><ul><li>Because semantic code does not contain design elements it is possible to change the look and feel of your site without recoding all of the HTML. </li></ul><ul><li>Once again, because design is held separately from your content, semantic code allows anybody to add or edit pages without having to have a good eye for design. You simply describe the content and the CSS defines what that content looks like. </li></ul>
  4. 4. Elements and tags An element is a construct consisting (usually) of an opening tag, some optional attributes, some content, and a closing tag. Elements can contain any number of further elements, which are, in turn, made up of tags, attributes, and content. The following example shows two elements: the <p> element and the <em> element. <ul><ul><li><p class=&quot;example&quot;>Here is some text, some of which is </li></ul></ul><ul><ul><li><em>emphasized</em></p> </li></ul></ul>A tag indicates the start and end of an element. The opening tag can contain multiple attributes, but it cannot contain other elements or tags, while the closing tag cannot contain anything but itself. In the preceding example, there are four tags: an opening <p>, an opening <em>, a closing </em>, and a closing </p>. Not all elements have closing tags. For example, <img>, <br>, <meta>, and <hr> are referred to as self-closing elements , empty elements , or replaced elements . Such elements are not container tags—that is, you would not write <hr>some content</hr> or <br>some content</br>—and any content or. In HTML, a self-closing element is written simply as <img>, <br>, <meta>, or <hr>. In XHTML, a self-closing element requires a space and a trailing slash, such as <img />, <br />, <meta />, or <hr />.
  5. 5. Attributes Attributes appear within tags, and they can only contain the value of the attribute, for instance: <p class=&quot;example&quot;>Here is some text, some of which is <em>emphasized</em></p> This example shows the class attribute. An attribute can contain multiple, space-separated values, which is useful if you need to apply different classes to one element. For instance, if you have two styles, one named example and another named reference, you can apply them both to a paragraph like so: <p class=&quot;example reference&quot;> Other attributes you may have already encountered might include alt, src, and title, but there are many more attributes, some element-specific (like the selected attribute used with the <option> tag) and some not (like the class and id attributes).
  6. 6. Divs and spans A div (short for “division”) is used for marking out a block of content, such as the main content block of your document, the main navigation, the header, or the footer. As such, it is a block element. It can contain further elements, including more divs if required, but it cannot be contained within an inline element. For example, a simple website may have a header, a main column of content, a secondary column of content, and a footer. The (X)HTML for this could look like the following: These content blocks can then be positioned and displayed as required using CSS. <ul><ul><li><div id=&quot;header&quot;> </li></ul></ul><ul><ul><li>... </li></ul></ul><ul><ul><li></div> </li></ul></ul><ul><ul><li><div id=&quot;mainContent&quot;> </li></ul></ul><ul><ul><li>... </li></ul></ul><ul><ul><li></div> </li></ul></ul><ul><ul><li><div id=&quot;secondaryContent&quot;> </li></ul></ul><ul><ul><li>... </li></ul></ul><ul><ul><li></div> </li></ul></ul><ul><ul><li><div id=&quot;footer&quot;> </li></ul></ul><ul><ul><li>... </li></ul></ul><ul><ul><li></div> </li></ul></ul>
  7. 7. Divs and spans A span is used for marking out sections within a block element and sometimes inside another inline element. It is an inline element, just the same as <em>, <strong>, or <a>, except without any semantic meaning—it is simply a generic container. It can itself contain further inline elements, including more spans. For example, say you wish to color the first two words of a paragraph red, keeping the rest of the paragraph black. You can use a <span> for this: A span cannot contain a block element—that is, you cannot place a <div> within a <span> and expect it to work the way you want. <ul><ul><li><p> </li></ul></ul><ul><ul><li><span class=&quot;leadingWords&quot;>The first</span> </li></ul></ul><ul><ul><li>two words of this å paragraph can now be styled differently. </li></ul></ul><ul><ul><li></p> </li></ul></ul>
  8. 8. Block and inline elements To oversimplify things a little, every element in (X)HTML is contained within a box, and that box is either a block-level box or an inline-level box. Figure 1-1. The box model, applied to block and inline boxes   A block-level box , such as a div, a paragraph, or a heading, begins rendering on a new line in the document and forces a subsequent element to start rendering on a new line below. It is not possible to place two block elements alongside each other without using CSS.   An inline-level box , such as a <span> or an <em>, begins rendering wherever you place it within the document and does not force any line breaks. It is not possible to stack two adjacent inline elements one on top of the other without using CSS. Furthermore, when an element is inline, if you apply margin-top/bottom or padding-top/bottom to it, then the value will be ignored—only margins and padding on the left and right have an effect.
  9. 9. Id and class attributes The id attribute is used to identify elements and mark up specific functional areas of a website, and the class attribute is used to classify one or more elements. These important attributes help you target elements when it comes to styling or scripting. Id attribute value can be used just once per page, whereas a class attribute value can be used multiple times.   You can also apply an id and a class to one element: These two attributes are not tied to a specific tag; any tag whatsoever can be given either or both attributes. <body id=&quot;homepage&quot; class=&quot;page&quot;> In CSS, you will have to declare an id with a hash mark (#) and classes with a period (.), like this: <ul><ul><li>#homepage { </li></ul></ul><ul><ul><li>background: blue; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>.page { </li></ul></ul><ul><ul><li>color: white; </li></ul></ul><ul><ul><li>} </li></ul></ul>
  10. 10. Structure of an xhtml document First we see a doctype declaration. A doctype declaration provides an indication as to what Document Type Definition (DTD) you’re going to be writing your markup to. After the root <html> element is open, we have the <head> of the document, which contains a <title> and can also contain <style>, <script>, <meta>, and <link> elements. <title> is the only compulsory element within the head, and it will be displayed in your browser’s title bar.   Following the closing <head> tag is the opening <body> tag, which can contain any nonhead-specific markup: paragraphs, lists, images, and so on.   The closing <body> tag is followed immediately by the closing <html> tag. <ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; </li></ul></ul><ul><ul><li>&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> </li></ul></ul><ul><ul><li><title>Our title</title> </li></ul></ul><ul><ul><li></head> <body> </li></ul></ul><ul><ul><li><p>Our content</p> </li></ul></ul><ul><ul><li></body> </html> </li></ul></ul>
  11. 11. Doctype declaration There are three XHTML doctypes available. The XHTML doctypes are Strict, Transitional, and Frameset. <ul><li>Doctypes in (X)HTML serve two important purposes. First, they inform user agents and validators what DTD the document is written to. </li></ul><ul><li>  </li></ul><ul><li>The second and, for practical purposes, most important purpose is that doctypes inform browsers to render documents in standards mode rather than quirks mode . </li></ul><ul><li>if an author has included a doctype, then that author knows what he or she is doing, and the browser tries to interpret the strict markup in a strict way (i.e., standards mode). The absence of a doctype triggers quirks mode, which renders the markup in old and incorrect ways, the assumption here being that if the author hasn’t included a doctype, then he or she probably is not writing </li></ul><ul><li>standard markup, and therefore the markup will be treated as if it has been written in the </li></ul><ul><li>past for buggier browsers. </li></ul><ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; </li></ul></ul><ul><ul><li>&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> </li></ul></ul><ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; </li></ul></ul><ul><ul><li>&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> </li></ul></ul><ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Frameset//EN&quot; </li></ul></ul><ul><ul><li>&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd&quot;> </li></ul></ul>
  12. 12. Using the Right Tag
  13. 13. Headings These tags are good for creating titles or section headings. Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading and <h6> defines the smallest heading. here are the examples: Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 You just wrap the preferred heading tag around the text, like so: Heading are block level elements and appear bold and big. The title of your page should be made into a level-one heading. The rest of your page should be divided into sections with further heading tags, getting progressively smaller for points and sub-points. Try not to skip levels (like going from a <h2> to a <h4>). <h3>Heading 3</h3>
  14. 14. Line breaks and horizontal rules The <br> tag is used when you want to break a line, but don’t want to start a new paragraph. The <br> tag forces a line break wherever you place it. This should only be used to force line breaks where they are required, and never to apply more vertical spacing between paragraphs or such in a document—that is more properly done with CSS. if you are writing XHTML rather than HTML, the element should be self-closing, like so: <br />. ----------------------------------------------------------------------------------------------------------------------------------- A horizontal rule is created in HTML with the <hr> element. It inserts into the document a line, which is described to represent a boundary between different sections of a document. The hr element has no uncommon attributes and should be styled using CSS if the default appearance in unsatisfactory. Also, like the line break, if you are writing XHTML and not HTML, use the self-closing form <hr />.
  15. 15. Paragraphs Use the paragraph tag when you want to break up two streams of information into separate thoughts. Don’t use blank <p> tag to add some vertical space between two page elements. Also the vertical space due to blank <p> tag can vary from browser to browser. Also don’t use <p> just to get a line break in a page. Here use <br /> tag which is made for that purpose. Example: <ul><ul><li><p>Use the paragraph tag when you want to break up two streams of information into separate thoughts.</p> </li></ul></ul><ul><ul><li><p>Don’t use blank this tag to add some vertical space between two page elements.</p> </li></ul></ul>
  16. 16. Lists Three list types are available in current (X)HTML versions: unordered lists <ul>, ordered lists <ol>, and definition lists <dl>. The differences between the list types are fairly minimal and straightforward: An unordered list should be used when your content is (as you would expect) not in any particular order. An ordered list should be used when your content is in an order of some kind: alphabetical, numerical, and so on. A definition list is designed for associating names or terms with values or other data—any items that have a direct relationship with one another, such as a glossary of terms.
  17. 17. List – Unordered list <ul> Lists follow a common skeleton every time — an outer container tag, and a new tag for each bullet. Observe: <ul><li>Which would create: </li></ul><ul><li>Bullet 1 </li></ul><ul><li>Bullet 2 </li></ul><ul><li>Bullet 3 </li></ul><ul><li><ul> stands for Unordered List, which means that the bullets are not ranked or numbered in any way, they’re all the same. <li> means List Item, each one corresponding to a bullet. </li></ul><ul> <li>Bullet 1</li> <li>Bullet 2</li> <li>Bullet 3</li> </ul>
  18. 18. List – Ordered list <ol> If you want your list to be ordered instead of unordered, it’s a simple matter of just substituting the <ul> elements with <ol>s, which of course stand for O rdered L ists. This will create: 1. List Item 1 2. List Item 2 3. List Item 3 See? All that was changed was that one letter. Beyond that, the rest of the structure remains intact <ol> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ol>
  19. 19. List – Definition list <dl> There is this third list type, useful for information that comes in pairs. The definition list consists of an opening <dl>, followed by a definition term (<dt>), and then any number of definition descriptions (<dd>). A typical definition list looks like this: <ul><li>And that’ll create: </li></ul><ul><li>Strive: </li></ul><ul><ul><li>to make strenuous efforts toward any goal </li></ul></ul><ul><li><dt>stands for D efinition T erm. It is not indented. </li></ul><ul><li><dd> stands for D efinition D escription. It appears indented. </li></ul><dl> <dt>Strive:</dt> <dd>to make strenuous efforts toward any goal</dd> </dl>

×