title: HTML tag safe for enclosing elements that does nothing
body: <p>I have elements (for example a div or a paragraph) which I don't want to inherit styles from their parent elements.</p>
  <p>for example</p>
  <pre><code>   &lt;style&gt;
        div{
           padding:3px;
         }
         /* and so many other basic tags styled like p, table, td, span, etc*/
     &lt;/style&gt;
      &lt;nonsensetag id=&quot;textToGrab&quot;&gt;
         &lt;div&gt;Hello World&lt;/div&gt;
         &lt;p&gt;Hi world&lt;/p&gt;
      &lt;/nonsensetag&gt;
  </code></pre>
  <p>so basically  I can't use <code>div</code> or <code>p</code> 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.</p>
  <pre><code>alert($('#textToGrab').text());
  </code></pre>
  <p>now what is <strong>the html tag that doesn't really do nothing</strong>? or do <strong>I need to wrap it with valid html tag and reset all the styles forcefully because css cascades?</strong> or its is <strong>safe to create my own html tag?</strong> if there's a possibility that <strong>I can add something in the standard html schema?</strong></p>
  <p>I read this question already but it doesn't quite fit on my situation</p>
  <p><a href="https://stackoverflow.com/questions/11850665/how-to-break-css-inheritance">How to break CSS inheritance?</a></p>