DEV Community

Cover image for HTML 5 and The Legends of the Elements

HTML 5 and The Legends of the Elements

Manu Martinez on November 24, 2021

Hi! so far we've been taking small bites of HTML cake but it's time to go further! ready? *Let's go! 😁 * First of all let's go in depth with eleme...
Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

Hey, few corrections (mostly minor):

Almost HTML elements can carry attributes, except for empty elements.

This is not correct I am afraid.

A prime example would be the <img> tag, this is self closing (empty) but must have attributes in order to be valid. Same for <input> etc.

The values of the attributes must be enclosed in quotation marks.

Only strings must be enclosed in quotation marks.

For example <img width=100 height=100 src="..."> is perfectly valid HTML.

However <img width=100px height=100px src="..."> would not be valid HTML.

Other than those minor points a great article, I just thought they were important bits of info given this is marked as #beginners! ❤

Collapse
 
whitehatdevv profile image
Manu Martinez

Thanks you for your minor apportions, we have just updated our post. As you said it's for #beginners, then we should have taken into account that.

Collapse
 
grahamthedev profile image
GrahamTheDev

No problem, always great to see a responsive author who corrects their articles quickly instead of ignoring feedback! ❤

Great article!

Thread Thread
 
whitehatdevv profile image
Manu Martinez

It's really important for us, we learn a lot from comments and contributions. Welcome to my blog and thank you for reading it :)

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

It goes beyond just that. <em> doesn't even have to be italic at all, and nested <em> elements represent increasing levels of importance and can therefore be styled with increasingly noticeable visuals.

To quote the spec:

The em element isn't a generic "italics" element. Sometimes, text is intended to stand out from the rest of the paragraph, as if it was in a different mood or voice. For this, the i element is more appropriate.

So no, you actually should be using <i> if you really want italic content for the sake of being italic, and <em> only if you want to add emphasis without caring much about how that emphasis is visually achieved.

Collapse
 
whitehatdevv profile image
Manu Martinez

Yes, it's exactly another point of view focusing in nested <em> tag, we have just adopted your recommendation to even clarify more the difference between these two tags. We really appreciate your interesting and the effort you have put writing this comment 😄

Thanks you for reading our post 😇

Collapse
 
deathshadow60 profile image
deathshadow60 • Edited

I think you could have better explained the difference between B, I, EM, and STRONG, and maybe mention CITE?

Remember, ALL HTML tags have meanings separate from their default appearance, and it is for those meanings we should be choosing/using them.

The "italic" tag doesn't mean "show this text in italic", it means "this text would be italic for grammatical or structural reasons" such as a book title that's not being cited and wouldn't be "emphasized". In the same way "bold" doesn't mean "show this text as bold" it means would be bold such as the name of a entity or party in a legal document, since those would not be receiving "more emphasis" -- what STRONG actually MEANS.

Both EM and STRONG being for emphasis, not "show this text as bold or italic". Just as P is for a grammatical paragraph not "I want space around this", and HR is for a thematic break or change in topic not "I want a line drawn across the screen"... or how H1..H6 create your logical document structure, and are NOT just to say "fonts in different weights and sizes".

I've said it for nearly two decades, if you choose ANY of your HTML tags, attributes, or classes based on what you want things to look like, you've failed to divine HTML's purpose.

Collapse
 
whitehatdevv profile image
Manu Martinez

I agree with you, you have take another point of view, but the meaning is the same that I have wanted to explain. Sincerely, you explication is more somatic that mine, I only want to explain basic concepts of HTML for teach other the basic structure, in the following post we are going to get into more details of each tag. I really appreciate your collaboration and your opinion, I will take into account for the following posts. I love your method to explain this difference, then I will copy your text for basing on it in the future :)

Collapse
 
deathshadow60 profile image
deathshadow60 • Edited

I have an example I've used for over a decade you're welcome to share in your article. It does an amazing job of showing all four in action.

<i><abbr title="Generic Universal Role Playing System">GURPS</abbr></i>, <b>Steve Jackson Games'</b> flagship role-playing game, was first released in 1985. Several licensed adaptations of other companies' games exist for the system, such as <i>GURPS Bunnies and Burrows.</i> However, <b>SJ Games</b> has no connection with <b>Wizards of the Coast</b>, producers of the <i>Dungeons and Dragons</i> RPG. <em>No <i>GURPS</i> content is open-source.</em> <strong>Do not plagiarize <b>SJ Games</b> work!</strong>

Just because the defaults for screen are the same, doesn't mean it's what they're for.

Thread Thread
 
whitehatdevv profile image
Manu Martinez

Yes I understand you, I really appreciate your collaboration :)

Collapse
 
whitehatdevv profile image
Manu Martinez

Thanks you for your details, it has been a mismatched. We have already updated our post. :)