DEV Community

Sloan
Sloan

Posted on

What are your favorite features of HTML5?

This is an anonymous post sent in by a member who does not want their name disclosed. Please be thoughtful with your responses, as these are usually tough posts to write. Email sloan@dev.to if you'd like to leave an anonymous comment or if you want to ask your own anonymous question.


I'm pretty new to coding, and I want to know how HTML5 is different from past versions of HTML. I feel like getting an understanding of those changes will help me become a better developer, and gain a larger understanding of how to use this specific markup language.

Discussion (9)

Collapse
jeremyf profile image
Jeremy Friesen

I love the semantic structure:

body
-- header
-- article
---- section
---- section
Enter fullscreen mode Exit fullscreen mode

But how those are composable as well; I can have a header in my article. In using these semantics you're helping those that use assistive technology better access your content.

I'm also a big fan of some unused tags:

  • dfn
  • abbr
  • cite
  • dl

These elements provide great mechanisms for helping decompose jargon.

And as Ben wrote…the details tag (paired with it's "child" summary) is amazing.

How we do details in DEV
Yup, you can do it here using the liquid following syntax:

{% details Your summary here %}
The text that's "hidden" within the details.
{% enddetails %}


Collapse
ben profile image
Ben Halpern

Oh my, pre-HTML5 web dev was pretty brutal!

I am pretty amazed whenever I encounter an HTML feature which I just assumed would always be an awful hack, but now it is just a native feature.

The Details disclosure element comes to mind.

Collapse
iamschulz profile image
Daniel Schulz

Uniformity: A simple, easy to use doctype, lowercase tags, no slash needed on self closing tags.
Also the separation of concerns. Table layout is deprecated, so are <font>, <center> and <marquee>. HTML has been sharpened for content markup.

Collapse
adiatiayu profile image
Ayu Adiati

I immediately got introduced to HTML5 since beginning of my journey.
So I'm not too familiar with the previous versions.

One example that I know, previously, we had <b> and <i> for bold and italics.
But since HTML5, they became <strong> and <em>.
One of definition of semantics is:

The study or science of meaning in languages.

So, we use <strong> to give more attention to the words/sentences and <em> when we want to emphasize words/sentences inside the tags.
These tags are not there to make them bold or italics, but they give meaning.

And therefore, there is also structure in semantics HTML to give meaning to the content in the whole page, such as headings (<h1> - <h6>), <header>, <main>, <section>, etc.

Semantics HTML also helps people who use screen reader. Because semantics HTML gives context for screen readers.

I hope these help 😊

Collapse
alohci profile image
Nicholas Stimpson • Edited on

One example that I know, previously, we had <b> and <i> for bold and italics.
But since HTML5, they became <strong> and <em>.

Well, not really. First, <b>, <i>, <strong> and <em> have existed since the very first complete drafts of HTML. They're all the same age. HTML5 gave <b> and <i> semantics that they didn't have previously, and the semantics of <em> changed quite subtly, but otherwise nothing changed. What that meant was that if you want semantics-free bold and italics, it's necessary to use CSS: font-weight: bold and font-style: italic respectively.

Collapse
adiatiayu profile image
Ayu Adiati • Edited on

Thank you for the clarification! Appreciate it! πŸ˜ƒ

Yes, I'm accustomed to use CSS as well if I want to apply bold or italics, also when I need to customize font sizes and untouch the headings 😊

Collapse
bbutlerfrog profile image
Ben Butler

Forms are so much better in HTML5! We have datetime types, we have native validation, there's... everything HTML lacked. It's a recognition that one of the primary uses of HTML is to submit data.

Collapse
natescode profile image
Nathan Hedglin

Canvas API. Making 2D and 3D games natively without any libraries or game engines is amazing.

Collapse
andrewbaisden profile image
Andrew Baisden

HTML5 Canvass excites me the most. Drawing graphics and creating animations and games its so powerful with JavaScript.