Semantic Formatting Elements

Semantic Formatting Elements

The element • The official specification for is that it "indicates a highlight that was not originally present but which has been added to bring the reader's attention to a part of the text that might not have been considered important by the original author, but which is now under previously unexpected scrutiny." • The definition goes on to say that "indicates a part of the document that has been highlighted due to its likely relevance to the user's current activity." • A familiar example is when a user performs a keyword search and the results page has the searched term highlighted. Another might be highlighting a portion of an original text that has taken on new importance.

Example of  • In this example, words of a poem are highlighted to indicate their unusual frequency: 8 out of 46 words in this poem are the same word: This is the man all tattered and torn, That kissed the maiden all forlorn, That milked the cow with the crumpled horn, That tossed the dog, That worried the cat, That killed the rat, That ate the malt That lay in the house that Jack built. If we want to emphasize something we've written on our own page, there is usually a better option than using . Let's take a look at these other options now.

XHTML Formatting Elements Let's review the formatting elements as they were used in XHTML: HTML5 includes each of these four elements but has redefined their usage. Let's cover them one at a time. : Meaning "emphasis", this tag was used in XHTML for emphasized text, which generally rendered in italics. : In XHTML, this was used to make text "stronger", which normally bolded the characters. : A holdover from earlier versions of HTML, this tag converted text to italics. XHTML discouraged its use, in favor of . : Another holdover from HTML, this tag bolded text. It was also discouraged in XHTML, in favor of .

Using in HTML5 • The element is not intended as a generic way to italicize text. • Instead, it is used to change the inflection of the affected text, which in turn changes the meaning of the sentence. • Consider these examples: We have to leave now. We have to leave now. There will be a history test on Friday. There will be a history text on Friday. We have to leave now. We have to leave now. There will be a history test on Friday. There will be a history text on Friday. By adding the inflection to a word or phrase, the sentence meaning is altered. In the second sentence, we have to leave right now, urgently. In the final sentence, it was thought that there would be no test, but now it's discovered that there will in fact be one.

Using in HTML5 • The element indicates semantic importance. It draws the reader's attention to an important portion of text. • The existence of does not change the overall meaning of the sentence, however. Warning: Ice is not safe to walk on. Warning: Ice is not safe to walk on. The meeting is at 5:00pm on Saturday. The meeting is at 5:00pm on Saturday. Warning: Ice is not safe to walk on. Warning: Ice is not safe to walk on. The meeting is at 5:00pm on Saturday. The meeting is at 5:00pm on Saturday. The element is a simple way for us to draw attention to something important on our page. Notice that if we do not bold the text, the meaning of the sentence remains the same.

Using in HTML5 • The element is used when text needs to be italicized but does not have the emphasis and meaning alteration that entails. • Examples include highly technical terms, words or phrases in foreign languages, thoughts, or the names of ships. Sadly, the Tasmanian Tiger - Thylacinus cynocephalus - is now extinct. Hot dogs and hamburgers are not exactly haute cuisine. I can't believe I'm saying this... I'd love to go! I bet Ishmael wishes he had never been on Pequod. Sadly, the Tasmanian Tiger - Thylacinus cynocephalus - is now extinct. Hot dogs and hamburgers are not exactly haute cuisine. I can't believe I'm saying this... I'd love to go! I bet Ishmael wishes he had never been on Pequod. Note that we can add a lang="xx" attribute for foreign words and phrases. This will further assist search engines and screen readers to understand our content.

Using in HTML5 • The element is used to bold text that does not have any additional semantic importance. • Common examples include product names and study keywords, but can also be used whenever we need to bold text for generic purposes. Coca-Cola and Cinnamon Toast Crunch are poor dietary choices. Remember that rods and cones play different roles to produce vision in the eye. Here is what bold text looks like in this font: Bolded text Coca-Cola and Cinnamon Toast Crunch are poor dietary choices. Remember that rods and cones play different roles to produce vision in the eye. Here is what bold text looks like in this font: Bolded text A good policy is to use and only when the semantic elements - , , and - are not appropriate. Bolding product names and keywords is not mandatory. It's purely optional and up to the creator of the web page to decide.

Change to the <hr> Element • In HTML, the <hr> element drew a horizontal rule across the page. • HTML5 tweaks this element by adding a semantic meaning, now defining it as a "paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book." ...but unfortunately there was no one there to greet him at the station. <hr> The following morning was greeted with a light mist that made it darker than... In practice, the <hr> element is a bit of a dinosaur to modern web designers, who prefer to use CSS styling and images for graphical and presentational components on their pages.

Change to the <s> Element • In older versions of HTML, the <s> element drew a horizontal line (strike) through text. HTML 4.01 retired this element as obsolete. • HTML5 has brought the element back from the dead, but with a new, more specific definition: "The <s> element represents contents that are no longer accurate or relevant." The world record for the 100 meter dash is <s>Asafa Powell at 9.74 seconds</s> Usain Bolt at 9.58 seconds. A common real world use for the <s> element is to strike through an older price and then to display the new, lower price to demonstrate savings to the reader.

Semantic Formatting Elements

Semantic Formatting Elements

Presentation Transcript

Presentation Formatting

Document Formatting

Citation Formatting

Workbook Formatting

Spreadsheet formatting

Output Formatting

Brief Formatting

FORMATTING PARAGRAPHS

Resume Formatting

MLA Formatting

Formatting Output

Formatting

Wrong Formatting

Formatting

APA Formatting

Document Formatting

MLA FORMATTING

FORMATTING TIPS

New Semantic Elements (Part 3)

MLA Formatting