Tech Junkie Blog - Real World Tutorials, Happy Coding!: HTML5 Tags

Sunday, June 19, 2016

HTML5 Tags

Not Supported in HTML5:
  • <tt>
  • <strike>
  • <noframes>
  • <frame>
  • <frameset>
  • <dir>
  • <center>
  • <big>
  • <basefont>
  • <applet>
  • <acronym>



DOCTYPE tag:

  • HTML5:
    <!DOCTYPE html>
    

  • HTML 4:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
  • XHTML Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
  • XHTML Traditional:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    


New HTML5 Tags:

Layout:
  • Top area of the page:
    <header>
  • Bottom area of the page:
    <footer>
  • Navigation links:
    <nav>
  • Line breaks:
    <wbr>
UI:
  • Progress bar, shows defined progress with flashing light:
    <progress>
  • Show result of a calculation:
    <output>
  • Meter (like a progress bar) but no flashing light:
    <meter>
Language:
  • Ruby annotation (East Asian typography):
    <ruby>
  • What to display if ruby annotation is not supported:
    <rp>
  • Definition/pronunciation of characters (East Asian typography):
    <rt>
Security:
  • Key pair generator, the public key is sent to the server:
    <keygen>
Data Type:
  • Date and Time:
    <time>
Event Handling:
  • Invokes a command for a button or html element, such as a Javascript function (only supported in IE9):
    <command>

External Application/Objects:
  • Embed external objects/content that sometimes requires a plugin such as Flash contents :
    <embed>
Media:
  • Sound content:
    <audio>
  • Video content:
    <video>
  • Subtitles for video or audio:
    <track>
  • List of sources(different media formats) for video or audio, the browser will play the supported video format:
    <sources>


Graphics:
  • Like a painting canvas that you can fill with graphics via scripting usually Javascript on the fly:
    <canvas>
Content:
  • Details the user can expand and collapse:
    <details>
    Details tag in Firefox Version 22.0:

    Details tag in IE 10.0.9200.16618:


    Details tag in Chrome Version 27.0.1453.116 m:

    Collapsed View In Chrome:

     


    Expanded View In Chrome:



  • Text next to the arrow in <details> tag:
    <summary>
  • Grouping of cotent, usually used in conjunction with <figcaption> to display an image with a caption:
    <figure>
  • Caption for &ltfigure&gt tag:
    <figcaption>
  • Format text in a different direction than adjacent text:
    <bdi>
  • Section of the page:
    <section>
  • A caption:
    <caption>
  • A content item:
    <article>
  • Related content item:
    <aside>
  • Highlight text:
    <mark>
  • Dialog box or window, a markup of conversions (not the dialog window more of like a transcript of a chat):
    <dialog>

Previous: HTML5: Mark Element
Next: HTML5 Page Template

2 comments:

  1. Thanks for sharing this.,
    Leanpitch provides online training in A-CSPO during this lockdown period everyone can use it wisely.
    Join Leanpitch 2 Days A-CSPO Certification Workshop in different cities.

    a-cspo certification
    a-cspo training

    ReplyDelete

  2. Thanks for sharing this.,
    Leanpitch provides crash course in Brain hacks using NLP everyone can use it wisely.

    Brain hacks with NLP

    NLP training

    ReplyDelete

Search This Blog