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

1 comment:

Search This Blog