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

3 comments:


  1. Der § 8a des BSIG verpflichtet Unternehmen dazu, bei Cyberangriffen schnell zu reagieren und die IT-Sicherheit kontinuierlich zu verbessern. Frauen in der IT-Sicherheit profitieren von gezielten Förderprogrammen, die den Einstieg erleichtern und Karrierewege ebnen. Während einige Programme auf Mentoring setzen, bieten andere spezialisierte Weiterbildungen im Bereich cybersecurity weiterbildung an. Studien aus dem Jahr 2023 zeigen, dass Frauen durch solche Maßnahmen ihre Fachkompetenz deutlich steigern können. Im Vergleich zu klassischen Schulungen setzen moderne Weiterbildungsangebote auf praktische Übungen und konkrete Zertifizierungen wie ISO 27001, was ihre Wirksamkeit erhöht. Für eine nachhaltige Entwicklung ist es wichtig, beide Ansätze miteinander zu kombinieren, um mehr Frauen für den Beruf der Cybersecurity-Experten zu gewinnen; zusätzliche Informationen dazu finden Sie unter https://csvisor.de/.

    ReplyDelete

Search This Blog