The document provides information on semantic HTML coding. It explains that semantic HTML focuses on describing the meaning of content rather than visual presentation. It discusses why semantic coding is important for accessibility, search engine optimization, and maintenance. It also covers common semantic elements and tags used to structure content semantically, such as headings, paragraphs, lists, and divs.

1. Semantic HTML Code Prepared by: Sanjay Raval | http:// www.usableweb.in /

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>

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).

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.

12. Using the Right Tag

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. 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 />.

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.

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>