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>


  • HTML5:
    <!DOCTYPE html>

  • HTML 4:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
  • XHTML Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  • XHTML Traditional:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

New HTML5 Tags:

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

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

  • Like a painting canvas that you can fill with graphics via scripting usually Javascript on the fly:
  • Details the user can expand and collapse:
    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:
  • Grouping of cotent, usually used in conjunction with <figcaption> to display an image with a caption:
  • Caption for &ltfigure&gt tag:
  • Format text in a different direction than adjacent text:
  • Section of the page:
  • A caption:
  • A content item:
  • Related content item:
  • Highlight text:
  • Dialog box or window, a markup of conversions (not the dialog window more of like a transcript of a chat):

Previous: HTML5: Mark Element
Next: HTML5 Page Template

1 comment:

Search This Blog