HTML5 Text Level Semantics reference: http://developers.whatwg.org/text-level-semantics.html#text-level-semantics • a element – anchor. useful to provide a link for a block of content. also helpful for cross reference using id. e.g. a text ad that should have a link wherever it is clicked. • em element – emphasis. emphasizing a particular word or phrase. e.g. you are not welcome!. not to be confused with i element. typically emphasis changes the meaning of a sentence in a subtle way. think about this example. • i element – change of context. voice, thinking, mood, etc. e.g. “i loved it” not really but can i tell the truth? • strong element – represents strong importance of its contents. does not change the meaning of a sentence. e.g. warning: contents are inflammable. • b – content to draw attention. without adding importance or change in mood or voice. e.g. Ragu and Anu
are brothers since birth. • mark – part of text highlighted for reference purpose. may not be intended by original author. e.g. searched word highlighted in search results. • small element – small print. disclaimers, caveats, legal restrictions or copyrights. meant for short runs of text only. when legal info becomes main content, it should not be marked as small. also it doesn’t mean low importance. small content can be marked as strong. e.g. violation of this rule is unacceptable • s element – content no longer relevant or accurate. not to be confused with del. e.g. MRP Rs 100; Our price Rs 99.99 • del element – removal from document. e.g. todo list done entries. • cite – citation. title of the quoted content from elsewhere. referred content. not to be confused with quote q element. it is only title. • q – quoting something. should not include quotation marks. it is work of styling. • dfn – definitions. just as in the beginning of formal documents.
e.g. MRB • abbr – marks something as abbreviation. title attribute is optional to provide the expanded version of the abbreviation. • data – provides machine readable form of content. e.g. patthu is the tamil word for ten. also see time`. • time – special case of data. date, time, time zone, etc. e.g. . • code – computer source code. e.g. The code element represents a fragment of computer code. • var – variable. placeholder. e.g. Rs 25 x qty = total. • samp – sample program output. e.g. Output: Hello World! • kbd – user input. e.g. Ctrl+F4 or File | Exit • sub and sup – sub and superscripts respectively. not for styling (branding LaTeX). Only to be used if the superscript and subscript meaning is important. e.g. E=MC2 • ruby – nothing to do with ruby language. useful in case of parallel annotation with the content.
e.g. english transliteration over tamil words in a sentence. • span – means nothing. used with global attributes such as class, lang, or dir. e.g. In Tamil, we greet with vaanga. Another e.g. def initialize. • br – line break. not actually meant for styling/presentation. again meant for meaning. useful for poetry, address, etc. • wbr – line break opportunity. useful in source code markup. e.g. def a_method(param1, param2, param3) for usage summary look here. Sections reference: http://developers.whatwg.org/sections.html#sections • body – main content of the document. just one per page. • section – parts of the document. e.g. home page can be split into intro, news items, contact info, etc. tabbed box can have different section for each tab, chapters. • article – useful for syndication. independently distributable or
reusable. e.g. forum post, blog post, etc. article may have sections. sections can have articles. go figure. • nav – navigation. a section with navigation links. special case of section. e.g. table of contents, links to major pages that should appear in all the pages, etc. • aside – content related to and part of main content. special case of section. could contain q quote. e.g. highlight of an article. • h1, h2, …, h6 – headings, subheadings, etc. e.g.
How to:
Programming without using hands
You never thought it is possible! Did you?
• hgroup -- heading of a section. used for grouping h1, h2, .... e.g. previous example could be contained with this tag.
• header -- group of introductory or navigation aids. could contain hgroup.
• footer -- represents footer. not necessarily that has to appear in the end. because it is presentation concern. e.g. author, copyright, etc. of an article.
• address -- not meant for postal addresses unless it is related to contact info of the current page or article. could be part of footer.
Content Flow • figure – contains a unit where the main content can flow around. similar to magazine content where the text can flow around an image, side bar, did you know?, etc. • figcaption – provides a caption for the figure. • div – avoid using it whatever it means. this is probably the mostly used tag though. :) Grouping • ul – unordered list • li – list item. need not have closing tag. e.g.
india
srilanka
• ol -- ordered list
• dl -- definition list. e.g. <dl><dt>gold<dd>a rare metal<dt>silver<dd>not that rare</dl> where dt is defn title; dd is defn description
• pre -- pre-formatted text. useful for formatting code for example. ascii art. etc.
• hr -- separates content. typically horizontal rule. but again it is the meaning that matters in HTML5; not presentation.
Forms • form — form which contains elements that take input • input — . It has many other types such as textbox, radio, submit, reset. • button — alternative to input when it comes to buttons such as submit or reset. It have more possibilities for styling through CSS. • fieldset — Helps to group related items such as radio buttons, checkboxes, etc. • label — a label to go along with the input controls. e.g.