Is any technical problem with use own html tags in Modern browsers-CodePudding

Sometimes my code gets horribly ugly

Especially when I use frameworks like tailwind When the project gets big, I can say without exaggeration that 90% of my time is spent finding the desired class between elements

One of the solutions to keep the code clean is to use own tags I don't mean the new html5 tags like aside, header , footer , section , ...

for example

<div >
   <div id="inner"> <!--  A dirty tag to prevent display flex from affecting child tags -->
      <div> somedata </div>
      <div> somedata </div>
      <div> somedata </div>
   </div>
</div>

can replaced with

<card >
   <inner> 
      <div> somedata </div>
      <div> somedata </div>
      <div> somedata </div>
   </inner>
</card>

even in vanilla css own tag's make the code more deciplined example

<div >
 <header>
  <div >
   <img src="example.jpg">
  <div>
  <div >
    ...
  </div>
 </header>
 <div >
 </div>
 .....
</div>

it can be like


<post>
 <header>
    <picture>
       <img src="example.jpg">
    </picure>
 </header>
 <content>
 <p> something </p>
 <content>
 ...
</post>

Is there any Serious technical problems other than not being supported by old browsers?

CodePudding user response：

After 21 day's coding own custom tags my answer is NO I use my own tags like this

default tags:

<div >
  <header>
  <img src="img_avatar.png" alt="Avatar" style="width:100%">
  </header>
<div >
    <div>John Doe</div>
    <p>Architect & Engineer</p>
  </div>
</div>

own-tags


<card>
<header>
  <image src="img_avatar.png" alt="Avatar" style="width:100%">
</header>
<container>
    <name>John Doe</name>
    <job>Architect & Engineer</job>
  </container>
</card>

every thing is fine.

notes :

<custome-tags> default display is inline
<image> is synonym for <img>
<title> is text-only and display:none element. you can use <subject> instead
<col> is specifies column properties for each column within a <colgroup> element. you can use <column> instead