HTML tag safe for enclosing elements that does nothing

Question

I have elements (for example a div or a paragraph) which I don't want to inherit styles from their parent elements.

for example

   <style>
      div{
         padding:3px;
       }
       /* and so many other basic tags styled like p, table, td, span, etc*/
   </style>
    <nonsensetag id="textToGrab">
       <div>Hello World</div>
       <p>Hi world</p>
    </nonsensetag>

so basically I can't use div or p to wrap the HelloWorld and Hiworld because it will be formatted by css rules but the real reason why I want to just wrap them in a tag so I can grab them using javascript while not affecting its current style.

alert($('#textToGrab').text());

now what is the html tag that doesn't really do nothing? or do I need to wrap it with valid html tag and reset all the styles forcefully because css cascades? or its is safe to create my own html tag? if there's a possibility that I can add something in the standard html schema?

I read this question already but it doesn't quite fit on my situation

How to break CSS inheritance?

Answer 1

What is the html tag that doesn't really do nothing?

The <span> and <div> tags signify no specific meaning and are intended only for markup.

or do I need to wrap it with valid html tag and reset all the styles forcefully because css cascades?

Resetting all the styles forcefully takes a boatload of CSS. If you feel you need to do this, you probably need to rethink carefully about what you are doing. You should be working with the cascading styles, not against them.

or its is safe to create my own html tag?

Never, ever do this. While modern browsers won't break (they are quite permissive), HTML has been standardised to stop everyone from inventing their own tags.

if there's a possibility that I can add something in the standard html schema?

Well, technically, you can. But it's just not worth the hassle.

Also, citing the w3.org:

Don't do this! Documents need to have a meaning as well as correct syntax. SGML and XML only define syntax. HTML and XHTML define meaning. If you add elements that aren't defined by a standard, only you yourself know what they mean. And in 20 or 50 years, even you may not know it anymore…

How can this be done then?

IMO, the whole problem here is that your CSS styling is too broad. You should move the formatting to a .class when possible. This gives you more fine-grained control over where you apply each .class and allows for greater code reuse. You'll sidestep the whole cascading issue entirely and will be able to wrap the sections in <span> tags.

---

NOTE: The rest of the answer didn't really fulfil the requirements, but I'd rather keep instead of deleting it, in case somebody finds it useful

You can mark tags without using a .class by using a custom data-* attribute:

<div data-yank='field1'>Hello World!</div>
<p data-yank='field2'>Hi world</p>

The attributeEquals selector allows you to choose appropriate element:

$( "input[data-yank='field2']" ).text()

Answer 2

You can use <section>. It's a HTML5 tag but all modern browsers support.

Answer 3

You can use any element for this. Try wrapping the code you want to use in JS with <div class="jsOnly"> for example. Then in your stylesheet just do

.jsOnly {
    display: none;
}

Everything inside that element will be accessible in the DOM, but you won't see it on the page.