Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
RealcomBiz
Pin It

20+ HTML Elements to Write Better Text Semantics

by Unknown | Thursday, November 13, 2014 | 188 Comments

HTML5 has several new layers, including a new set of semantic tags. While there is still some debate about whether or not we should be using and styling these tags I think at the very least we should start learning them.



The following HTML tags are used to format the appearance of the text on your web page. This can jazz up the look of a web page, however, too much variety in the text formatting can also look displeasing.


The <mark> Element

The HTML <mark> element represents highlighted text, i.e., a run of text marked for reference purpose. For example it can be used in a page showing search results to highlight every instance of the searched word. Most browsers will display the <mark> element with the background-color as yellow and color value as black.

Example:

<p>The <mark>marked</mark> text will be highlighted with a yellow color.</p>


The <code> Element

The HTML <code> Element represents a fragment of computer code. By default, it is displayed in the browser's default monospace font.
It's typically used to indicate sections of computer code that should not be executed, but rather should be rendered as readable code.

Example:

<p>An example of a regular text and <code>a piece of computer code.</code></p>

A CSS rule can be defined for the code selector to override the browser's default font face. Preferences set by the user might take precedence over the specified CSS.


The <cite> Element

The HTML <cite> element is used for representing a citation in an HTML document.
Text enclosed in <cite> tags is intended to represent the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theater production, a play, an opera, a musical, an exhibition, etc).

Use the <cite> attribute on a <blockquote> or <q> element to reference an online resource for a source.

Example:

<p><cite>The Red Light</cite> by Eric Simon. Painted in 1893.</p>

Most browsers will render cite content in italics, but this style can be overridden using CSS.


The <q> Element

The HTML <q> element indicates that the enclosed text is a short inline quotation. It is important to remember that the <q> tag is for inline quotations that don't require paragraph breaks; for long quotations use <blockquote> element.

Example:

<p>Did you know <q>The quick brown fox jumps over the lazy dog</q> contains every letter of the alphabet?</p>

In the above example, you should see quotation marks around “The quick brown fox jumps over the lazy dog.” If you don’t, I guess you’re using IE or Windows.
Most modern standards-aware browsers, like Chrome, Firefox, Safari, and Opera, should add quotes around text enclosed within the <q> element. Some browsers, like Internet Explorer, may not make any sort of style change for quotations, but it is possible to apply a style rule.

Most browsers will display the <q> element with the following default values:

q {
display: inline;
}
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}


The <samp> Element

The <samp> element purpose is to identify a sample of characters that form the output or result of a computer program. It is usually displayed in the browser's default monotype font (such as Lucida Console). Line breaks are handled just like elsewhere in HTML. Thus, in reality <samp> element is similar to the <code> element.

Example:

<p>To save the image file, select <samp>File</samp> - <samp> Save as... </samp></p>

Most browsers will display the <samp> element with the font-family value as monospace, a CSS rule can be defined for the <samp> selector to override the browser's default font face. Preferences set by the user might take precedence over the specified CSS.


The <kbd> Element

As the name might suggest, the <kbd> element is used to represent user input that is typically entered via a keyboard. You might use this when you are describing what a user would enter to carry out a specific task. It’s most likely to be found in online technical manuals or support sites.

Example:

<p>To undo your last action, press <kbd>Ctrl</kbd> + <kbd>Z</kbd>.</p>

Most browsers will render kbd content in a monospace font, but it’s possible to style its display with CSS (for example, setting a background color and a border to make the character appear a little more like a key on a keyboard).


The <s> Element

The <s> element specifies text that is no longer correct, accurate or relevant. The <s> tag is not appropriate to define replaced or deleted text, use the <del> element to define replaced or deleted text. An example of its usage can be found on ecommerce site, where a price tag is no longer relevant and a new one is been introduced.

Example:

<h1>T-shirts Locker</h1>
<p>Versace <s>$104.99</s> - Now $69.99
Burberry <s>$90</s> - Now $65
Zara <s>$94.55</s> - Sold Out</p>

The <s> puts a horizontal line (a strike-through) over its content by default. Note that using this will cause your page to be invalid in HTML 4.1/XHTML 1, 1.1. This element was first introduced in HTML 3.0, but was not carried through to HTML 3.2. Both <s> and <strike> are deprecated in HTML4.
If the strike-through is purely for presentational effect, you should use CSS to style the affected text instead of using this element.


The <data> Element

The <data> element along with the value attribute, links a given content with a machine-readable translation. If the content is time- or date-related, the <time> element should be used instead.

For example, you might like to display a list of products or services for your users to choose from. Each product has a unique product ID. Because the product ID is a lengthy number, and users probably won't know what the product is simply by looking at its ID. Therefore, you place the product ID into the value attribute of the <data> element. You then display the product title to the user.

Example:

<p>New Products</p>
<ul>
<li><data value ="764-46236099">Coffee cups</data></li>
<li><data value ="764-46236100">Spoon sets</data></li>
<li><data value ="764-46236101">Electric cooker</data></li>
</ul>


The <time> Element

The <time> element represents either a time on a 24 hour clock, or a precise date in the calendar, optionally with a time and a time-zone offset.

This element is intended as a way to encode modern dates and times in a machine-readable way so that, for example, user agents can offer to add birthday reminders or scheduled events to the user's calendar.

Example:

<p>We open at <time>09:00</time> every morning.</p>

<p>I have a meeting <time datetime="2014-11-17T14:00">next week</time>.</p>

<p>The concert took place on <time datetime="2014-11-01T12:00-05:00">November 01</time>.</p>

As you might have noticed from the above examples, we have 3 examples. The 1st example demonstrates basic usage of the <time> tag, the 2nd shows how to use the datetime attribute, which represents the date, time, or duration for whatever text you are representing in a machine readable format. That means it is for computers, not humans, so it has very specific formats, and must have a valid date with an optional time string, and the 3rd example uses the datetime attribute to provide an even more specific date.

Here's a well-detailed guide by Ty Strong about the <time> element.


The <hr> Element

The <hr> element creates a horizontal ruler, which can be used to separate different vertical sections of your webpage. Two paragraphs following each other with a <hr> element in between will have a horizontal line displayed in between them.

Example:

<p>HTML is a language for describing web pages...</p>
<hr>
<p>CSS defines how HTML should appear in browsers...</p>

Most browsers will display the <hr> element with the following default values:

hr {
border-style: inset;
border-width: 1px;
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
}

In previous versions of HTML, it represented a horizontal rule. It may still be displayed as a horizontal rule in visual browsers, but is now defined in semantic terms, rather than presentational terms.


The <var> Element

The <var> variable elements represents a variable in a mathematical expression or a programming context. When text is put between the opening and closing <var> tag it is displayed as a variable text.

Example:

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

The <var> has good browser support; with all of the major browsers rendering the variable text in italics.


The <sup> Element

The <sup> (superscript) element defines a span of text that should be displayed, for typographic reasons, higher, and often smaller, than the main span of text.

Example:

<p>Value of 2<sup>2</sup> + 3<sup>3</sup> =31</p>

Note that this element must not be used for styling purpose like the styling of the product name Latex. CSS style should be used: the vertical-align property with super as value will achieve the same effect.


The <sub> Element

The <sub> (subscript) element is an opposite of the <sup> element. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O.

Example:

<p>The chemical formula of water is H<sub>2</sub>0</p>

You can also achieve similar results using the vertical-align: sub; style property.


The <ins> Element

The <ins> element can be used to identify anything from a specific word or phrase that’s been inserted (in which case the ins is deemed to be an inline element) to an entire block of content, which could include a number of nested block-level elements. If the ins is an immediate child of <body> (with a Strict Doctypes declaration), it’s a block-level element. If it’s a child of a <p> element, it’s deemed to be an inline element.

Example:

<p>I am <del>very</del> <ins>extremely</ins> happy that you visited this page.</p>

Browsers will normally underline inserted text and strike a line through deleted text.


The <del> Element

The <del> element defines text that has been deleted from a previous version of the document. This element is commonly used together with the HTML <ins> element in situations when a piece of content is replaced by a new one.

Example:

<p>I am <del>very</del> <ins>extremely</ins> happy that you visited this page :)</p>


The <dfn> Element

The <dfn> element represents the defining instance of a term. This element has no element-specific attributes, the title attribute has special semantics for this element. If the <dfn> tag has a title attribute, then the exact value of that attribute is the term being defined.

If it contains only an <abbr> element with a title attribute, then the term is the value of that attribute. Otherwise, the text content of the <dfn> element is the term being defined.

The definition of the term should be given by the surrounding <p> , <section> or  definition list group (usually a <dt>, <dd> pair).

Example:

<p><dfn title="Microsoft web browser">Internet Explorer</dfn></p>

<p><dfn><abbr title="Internet Corporation for Assigned Names and Numbers">ICANN</abbr></dfn> is the international organization which helps ensure that Internet domain names are assigned in an orderly manner.</p>

Most HTML 5 browsers such as Firefox and Opera, display the text inside the <dfn> element in an italic font, WebKit browsers such as Chrome and Safari will display it in an upright font.


The <abbr> Element

The <abbr> element contains abbreviated text and is commonly used together with the title attribute to expand/explain the abbreviation.

Example:

<p><abbr title="HyperText Markup Language">HTML</abbr> is the best thing since sliced web.</p>

An <abbr> element does not necessarily need a title attribute, although it never hurts to include it. Marking abbreviations can give useful information to browsers, translation systems and search-engines.

The <abbr> element is supported by most browsers, but in varying visual styles. Internet Explorer seems not to support this tag, Firefox and Opera underline a marked-up abbreviation that has an associated title attribute with a light dotted line (this can be styled using CSS); Safari and Chrome recognize the <abbr> content, but with no underline. Firefox, Opera, Chrome and Safari all display the title attribute for the abbreviation as a tooltip on mouse over.


The <ruby>, <rt>, and <rp> Elements

The <ruby> element is used for specifying Ruby annotations, which is commonly used in East Asian typography.

As the name implies, Ruby characters are small, annotative glosses that can be placed above or to the right of a character when writing logographic languages such as Chinese or Japanese to show the pronunciation.

The <ruby> element is often used with the <rt> (ruby text) element, which describes the pronunciation of an individual character in a Ruby annotation, and the <rp> (ruby parentheses) element, which wraps opening and closing parentheses around <rt> ruby text. These are for user agents that don’t support ruby text, so that it makes sense when displayed inline. Browsers that support <ruby> hide <rp> via display: none;.

<ruby>
  æ¼¢ <rp>(</rp><rt>Kan</rt><rp>)</rp>
  明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp>
</ruby>


The <wbr> Element

The <wbr> (Word Break Opportunity) element specifies where in a text it would be ok to add a line-break (indicated with an hyphen). When a word is too long, or you are afraid that the browser will break your lines at the wrong place, you can use the <wbr> element to add word break opportunities. This element can be very helpful for particularly long words, URLs, or sections of code.

Example:

<p>Remember that song from Mary Poppins 'Super<wbr>califragilistic<wbr>expialidocious'?</p>

The difference between the <wbr> tag and the <br> tag is that the <br> tag forces a line break. The <wbr> tag, on the other hand, simply represents a line break opportunity - the browser should only render a line-break if necessary.

When the <wbr> element is used inside the nobr (no break) element, its purpose is somewhat different. Rather than hinting at where a word break may occur, it tells the browser that a word break should occur (simply using a br element inside a nobr would not have any effect).


The <bdo> Element

The <bdo> (Bi-Directional Override) element is used to override the Unicode bidirectional algorithm. What it basically does was what, it reverse the direction of text enclosed between the opening <bdo> and closing </bdo> tags.

This is usually used with languages that are read in a different direction to the default language. For example, if Hebrew were used in an English document, it would need to be defined as being read from right-to-left.

Example:

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

Note the presence of dir in the above code. It's used to specify the direction of text inside the <bdo> element. Other 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.


Conclusion

There you have it, an array of highly semantic and really nifty text-level elements to use in your work; some old, some new but all useful.

You can view the live demo of each elements below:

See the Pen Text-level HTML Semantics Elements by Durodola Ridwan (@durodolaridwan) on CodePen.

Not all browsers are supporting these tags, however you can still use them today. Most browsers not named Internet Explorer allow you to create any element you like and let you style those elements how you want. They simply won’t give those tags any default styling.



Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

188 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. The developers are usually more technical in nature. They tend to have excellent problem solving skills and are generally good at math as depicted by Epic research.

    ReplyDelete
  2. Its very useful if every one should follow this.aiesecuib

    ReplyDelete
  3. Its really informative tutorial. Thank you for this tutorial .babblein

    ReplyDelete
  4. its really informative tutorial. Thank you for this tutorial .
    denkikai

    ReplyDelete
  5. I am so excited while I read all the comments.sandstonecateringhhi

    ReplyDelete
  6. Not only to read need to spread every one.
    biteb

    ReplyDelete
  7. Not only to read need to spreed every one.ecolenepal

    ReplyDelete
  8. its really informative tutorial. Thank you for this tutorial .
    russia2you

    ReplyDelete
  9. Nice post all information are useful to real life.wwulacrosse

    ReplyDelete
  10. Peoples are giving wonderful thoughts…jabarizuberi

    ReplyDelete
  11. Not only to read need to spreed every one.spain-home

    ReplyDelete
  12. What a good suggestion posted by the peoples
    grupmetafor

    ReplyDelete
  13. Thank you for this tutorial.its really informative tutorial.amyrdhlisterconnect

    ReplyDelete
  14. Nice post all information are useful to real life.hoverfusion

    ReplyDelete
  15. all the words in simple way every one should understand easily.snackbaridila

    ReplyDelete
  16. Its very useful if every one should follow this.antifa-koblenz

    ReplyDelete
  17. Thanks for sharing this valuable information to our vision. You have posted a trust worthy blog keep sharing. HTML5 Training in chennai | HTML5 Training chennai | HTML5 Course in chennai | HTML5 course chennai

    ReplyDelete

  18. I have read your post, it was good to read & I am getting some useful info's through your blog keep sharing...
    DOT NET Training in Chennai | DOT NET Training Institute in Chennai

    ReplyDelete
  19. Pretty article! I found some useful information in your blog, it was awesome to read, thanks for sharing this great content to my vision, keep sharing.
    ccna training center in Chennai

    ReplyDelete
  20. This comment has been removed by the author.

    ReplyDelete
  21. awesome to share that post about element tag to read that post very usefull for me
    http://www.thinkittraining.in/web-designing-training

    ReplyDelete
  22. thanks for sharing that html tags and elements its really useful my knowleadge
    http://www.attendasoft.com/website-design-development-services

    ReplyDelete
  23. Thanks for sharing this valuable post to my knowledge great pleasure to be here SAS has great scope in IT industry. It’s an application suite that can change, manage & retrieve data from the variety of origin & perform statistical analytic on it…
    Regards,
    sas training in Velachery|sas courses in chennai|sas training in Chennai

    ReplyDelete
  24. Happy veteransday 2015 images

    http://www.veteransremembranceday2015.com/

    veterans day 2015 quotes
    veterans day 2015 pictures
    veterans day 2015 images
    veterans day 2015 poem
    veterans day 2015 songs

    http://www.veteransremembranceday2015.com/

    Happy veterans day 2015 quotes



    ReplyDelete
  25. Very nice piece of article which can help many developers, thank you for sharing your knowledge with us. Keep sharing.
    PHP training in Chennai||PHP course in Chennai ||PHP training institute in Chennai

    ReplyDelete
  26. MPCDF Technician Assistant Grade 3 Recruitment 2016

    Posts your shared useful information and meaningful life, I'm glad to be reading this article and hope to soon learn the next article. thank you..............

    ReplyDelete
  27. The main thing which i like about web designing is that itneeds creativity and we need to work differently acccording to our clients need this needs a creativity and innovation.
    web designing course in chennai|web designing training in chennai|web designing courses in chennai

    ReplyDelete
  28. After the website s completed it is very impoprtant to market it. Be it a brand or a website, if you want to reach a large audiece then effective marketive should done and this can be achieved by SEO.
    Seo training in chennai|Seo training|Seo courses in chennai|Seo training chennai

    ReplyDelete
  29. Digital Marketing is one of the most promising field which is giving a tough tie for traditional marketing methods.
    digital marketing course in chennai|Digital Marketing training in chennai|digital marketing courses in chennai Digital Marketing is one of the most promising field which is giving a tough tie for traditional marketing methods.
    digital marketing course in chennai|Digital Marketing training in chennai|digital marketing courses in chennai

    ReplyDelete
  30. Another valuable information,after referred that post ,find more new information.Thanks for sharing that valuable information.
    Oracle SQL Training in Chennai

    ReplyDelete
  31. I was working and suddenly I visits your site frequently and recommended it to me to read also. The writing style is superior and the content is relevant. Thanks for the insight you provide the readers!
    fireboy and watergirl | super smash flash 2 , fireboy watergirl | ssf2 and minecraft , minecraft 2 , minecraft 2 download , minecraft 2 baixar

    ReplyDelete
  32. In India thenumber of smartphone users have been on a rise. Among them also the people using android is way to high. Being an android developer would be the dorrect career choice.
    Android training in Chennai | Android course in Chennai | Android training institute in Chennai

    ReplyDelete
  33. One of the biggest WWE Event Of the year, Extreme Rules 2016 is an upcoming professional wrestling pay-per-view (PPV) event produced by WWE. extremerules 2016 live It will take place on May 22, 2016, at the Prudential Center in Newark, New Jersey. It will be the eighth event under the Extreme Rules chronology. Extreme extremerules 2016 live stream
    Rules will consist of professional wrestling matches that involved wrestlers from pre-existing scripted feuds or storylines that play out on WWE’s primary television programs, Raw and SmackDown. Wrestlers will portray heroes or villains as they follow a series of events that extremerules 2016 live streaming build tension and culminate in a The BFG Full Movie Online wrestling match or series of matches. indy 500 live stream The event was originally scheduled for May 1, 2016, at the Allstate Arena in Rosemont, Illinois, but then it switched dates and venues with Payback.

    ReplyDelete
  34. HTML5 has several new layers, including a new set of semantic tags. While there is still some debate The BFG Full Movie
    about whether or not we should The BFG Full Movie Online be using and styling these tags I think at the very least we should start learning them.

    ReplyDelete
  35. The strategy you have posted on this technology helped me to get into the next level and had lot of information in it. The angular js programming language is very popular which are most widely used.
    AngularJS Training in Chennai | Angularjs training Chennai

    ReplyDelete

  36. Great post....Thank you for posting the great content……I found it quiet interesting, hopefully you will keep posting such blogs…
    If you Want more seo course chennai

    ReplyDelete
  37. The war between humans, orcs and elves continues. Lead your race through a series of epic battles, using your crossbow to fend off foes and sending out units to destroy castles. Researching and upgrading wisely will be crucial to your success!
    slitherio | unfair mario 2 | age of war 2
    The game controls are shown just under . Movement mechanisms primarily include acceleration and tilting controls.
    cubefield | tank trouble | happy wheels |gold miner |
    age of war 6 | duck life

    ReplyDelete
  38. Thank you for sharing a very useful article . I like it very much. Feel free to surf to my web-site.
    hotmail login | create new hotmail account
    Creating a Gmail account is quick and easy. You can follow the tutorial to sign up Gmail here
    install google drive | gmail login

    ReplyDelete
  39. I understand what you bring it very meaningful and useful, thanks.
    wingsio game | supermechs | wingsio play | wings.io | super mechs | wingsio

    ReplyDelete
  40. Thanks a lot for sharing this great article, I really appreciate the hard work you have put in. Will recommend your site to my friends for sure. Apple iPhone 8

    ReplyDelete
  41. This is the game so players feel very fierce , adventurous . You try to join and play this game , you will feel great like.
    | tank trouble 3 | | happy wheels game
    gun mayhem 3 | gun mayhem 3
    learn to fly 3

    ReplyDelete
  42. WP Master Developer Pro review - the update from JavaScript Editor – a best-selling product with comprehensive assistance for coders!
    agb review
    agbreview.com
    http://agbreview.com
    http://agbreview.com/
    agbreview.com

    ReplyDelete
  43. Thanks for the article. This is very helpful
    Keep it up!!
    MailGet Review

    ReplyDelete
  44. Are you looking for best website to download eBook torrents for free? Then EbookShare will be the right place. kovalanj

    ReplyDelete
  45. Thanks for providing such nice information to us. It provides such amazing information on care/as well Health/. The post is really helpful and very much thanks to you. The information can be really helpful on health, care as well as on examhelp/ tips. The post is really helpful.
    NEET Answer key 2017
    NEET Rank Predictor 2017

    NEET Cut off Marks 2017
    NEET Counselling 2017
    CBSE NEET Result 2017

    UP board 12th Result 2017
    UP board Result 2017

    ReplyDelete
  46. Disgrace on the seek engines
    for not positioning this publish upper! Come on over and discuss with my web site .
    Thanks
    crackphilia

    ReplyDelete
  47. Good blog! Is your theme custom made or did you download it from somewhere?
    A design like yours with a few simple adjustements would
    really make my blog shine.
    Please let me know where you got your theme.
    avast free crack
    disk drill pro crack
    devonthink pro server crack
    ashampoo burning studio crack

    ReplyDelete
  48. You’re so interesting! I don’t suppose I’ve read anything like this before. So wonderful to find another person with some unique thoughts on this subject.Really.. many thanks for starting this up. This web site is something that’s needed on the web, someone with some originality!
    formate factory crack
    iobit smart defrag pro 6 crack
    pinnacle game profiler crack

    ReplyDelete
  49. Your method of describing the whole thing in this piece of writing is actually pleasant
    every one be able to without difficulty know it, Thanks
    a lot
    tipard total media converter crack
    hotspot shield crack
    universal document converter crack
    avg secure search crack
    gameloop android emulator crack

    ReplyDelete

  50. This is very attention-grabbing, You’re an overly skilled blogger.
    I’ve joined your feed and look ahead to seeking more of your great post.
    Additionally, I have shared your site in my social networks

    movavi pdf editor activation key
    wondershare filmora
    cleanmymac x crack
    tubedigger crack
    adobe lightroom

    ReplyDelete
  51. It’s not my first time to pay a quick visit this web
    site, i am visiting this site dailly and obtain fastidious data from here
    daily.

    connectify hotspot pro crack
    clean master
    macx video converter pro
    windows 10 activation key crack
    johnny trigger apk

    ReplyDelete

  52. Great blog! Is your theme custom made or did you download it from somewhere?
    A design like yours with a few simple tweeks would really make my blog stand out.
    Please let me know where you got your design. Bless you pinegrow web editor
    topaz labs
    snap tube premium apk

    ReplyDelete
  53. Wonderful goods from you, man. I’ve have in mind your stuff previous to and you are simply
    too magnificent. I really like what you’ve obtained here, really
    like what you are saying and the way during which you assert
    it. You’re making it entertaining and you continue to take care of to stay it sensible.
    I cant wait to read far more from you. That is actually a wonderful web site.
    magix samplitude music studio crack
    vmix crack
    vmix crack

    ReplyDelete
  54. https://coursejet.com/digital-marketing-courses-in-chennai/

    ReplyDelete

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger