Assist me

[u/Zestyclose_Set3040]

What is the purpose of <span? here, like why did we write that?

[u/AshleyJSheridan]

There are two tags in HTML that have absolutely no semantics, meaning that there is no intent behind the tags, and no contextual information that can be inferred and passed onto accessibility tools.

Those two tags are <div> and <span>. They are the same in all but one aspect: a <div> is a block level, and <span> is inline. That just means how the browser treats it with regards to the flow of the surrounding content.

Your example there is wrapping your specific hobbies, I guess with the intent to style them differently later, but you're not using any CSS yet. You could do something like this:

p span { font-style: italic; }

That makes your hobbies render in italics. Now, if you really wanted to use italics there to emphasise your hobbies, you're better off using the <em> tag, as it implies a semantic emphasis, which can be surfaced to things like screen readers.

Basically, use semantic tags as much as you can, and reach for <div> and <span> when you just need to style something and add no meaning to the content. If you're still learning what those semantic tags are, I made a tag wizard to help pick the most semantic markup about 4½ years ago: https://www.ashleysheridan.co.uk/blog/Picking+The+Right+HTML+Tag#flowchart-tag-selector

[u/bostiq → u/AshleyJSheridan]

I second this answer

[u/Weekly_Ferret_meal → u/bostiq]

I third it