Semantic HTML

Hello,

I just wanted to know if semantical elements such as

<aside>
<main>
<article>
<figure>

Are actually used in the real world because I have some experience with HTML and coding in general and i have never seen any of them in a real code.

Thank you.

Hello, and welcome to the forums @agarkov8 :slightly_smiling_face:

The semantical elements in HTML are used in websites and professionally. Examples are <header> and<footer> tags which are the top and bottoms that businesses and other people use. Other tags used are <section> and <nav> which is used on this page.

I hope this helps =)

6 Likes

As much as it represents a segue from current learning, it never hurts to go back down the timeline and put yourself at an earlier place in history. It’s dry reading but it definitely gives one a better sense of how the current foray of semantic elements evolved over the several generations of HTML.

It also doesn’t hurt to delve all the way back to when SGML was first conceived and later implemented in word processors, and other document/data centered environments.

The term semantic relates directly to meaningful description in a generic sense.

<div></div>

The only meaning we can derive from the above is a division. That tells us it will occupy the entire width of the document, and as much height as it needs to fit all the content we write into it. We give the element more meaning by assigning it either a class, or an id.

<div id="main"></div>

Now we know something more about the element in general terms as it relates to the document as a whole. It is the main division.

<main></main>

is the semantic element that replaces that construct.

9 Likes

Thanks you very much for your answer @trevorhodges . Well, my question was only for those 4 particular elements that I wrote about above in the first comment. I have seen a lot those elements- header , footer, nav
and I know that they are used on regular basis but the others that I mentioned above, I have never seen them anywhere actually.
Thanks.

1 Like

The thing to understand about HTML is that even while we are given a full range of elements that vendors are encouraged to support (according to expected behaviors) this does not put a cap on it. We can invent our own elements and make full use of them.

 <dog>Rhodesian Ridgeback</dog>

We can style the element with CSS,

dog {
    color: brown;
}

and we can hook it in a script,

const dog = document.querySelector('dog')

Now, if a given browser does not want to cooperate we simply educate the browser using its own scripting environment.

This takes us back to early HTML and some of the great minds in the working groups. Remy Sharp comes to mind, but he is not alone. Read up on how some very smart people helped IE to recognize HTML5 before it was officially supported. Search for the term, html shim.

8 Likes

Wow thank you @mtf. I didn’t know that we can create our own elements. Now I learned something new. Cheers. :ok_hand:

1 Like