Layout-Neutral Tag for CSS

Layout-neutral tag for CSS?

No, there is not.

(And that's because such an element wouldn't really fit into the rest of HTML. The only reason DIV and SPAN affect the surrounding area is because they're block and inline elements, respectively. What would an 'invisible' element be? If you need something that's completely independent, absolutely (or relatively) position it and give it a higher z-index.)

Layout neutrality of the span tag

The <span> element is defined to be an inline (text-level) element. Otherwise, it is semantically empty and layout-neutral.

By HTML syntax, the <span> element must not contain block elements, such as <div>. If you violate this, there is no specification of what browsers should no. It sounds pointless to play with that, when you can use the <div> element. It is defined to be a block element, which means that in rendering it by default starts on a new line and any content after it starts on a new line (but no empty lines are generated by this behavior). Otherwise, it is semantically empty and layout-neutral.

What HTML tag should be used for semantically meaningless design?

I would suggest <div>'s for block level elements and <span>'s for inline elements. If you are placing these inside an element that only allows its children to be inline (but you would like the element to be block) use a <span> and use CSS to display it as block. Cringe!
I know this seems obvious (since you pretty much answered your own question), but the purpose of <div>'s and <span>'s are to make up for the lack of a semantically proper element.

Putting HTML tags that are CSS grid layout children into a section tag to be more WCAG friendly

Does assigning the added grouping elements display:contents get what you need? Like this:

/* whole */

body {

    margin  : 0;

    height  : 100vh;

    overflow: hidden;

}

#wrapper {

    height               : 100vh;

    width                : 100vw;

    display              : grid;

    grid-template-columns: 1fr 8fr;

    grid-template-rows   : 2fr 17fr 1fr;

    grid-gap             : 2px 2px;

}

section {

  display:contents;

}

/* header */

#logo {

    grid-column    : 1/2;

    grid-row       : 1/2;

    display        : flex;

    justify-content: center;

    align-items    : center;

    padding        : 1em;

}

img {

    max-width  : 150px;

    max-height : 90px;

}

#header {

    grid-column    : 2/4;

    grid-row       : 1/2;

    display        : flex;

    justify-content: center;

    align-items    : center;

}

h1 {

    text-align    : center;

}

/* content */

#left_aside { 

    background : yellow;

    grid-column: 1/2;

    grid-row   : 2/3;

}

#right_content { 

    background : black;

    color      : white;

    grid-column: 2/4;

    grid-row   : 2/3;

}

/* footer */

footer { 

    background : orange;

    grid-column: 1/4;

    grid-row   : 3/4;

}

    <!-- Begin Wrapper -->

    <!-- I tried to put a <main> tag instead of a div here, but as a result I

         got a blank page showing nothing else but the logo top left 

         of the page -->       

    <div id="wrapper">

     

      <!-- header, semantic grouping #1 that I would like to make -->

      <section>

        <div id="logo" ><img src="../assets/images/some_image.png"/></div>

        <div id="header"><h1>header h1</h1></div>

      </section>

      <!-- content, semantic grouping #2 that I would like to make -->

      <section>

        <div id="left_aside">

          <nav>

            <ul>

              <li><a href="#">link 1</a></li>

              <li><a href="#">link 2</a></li>

              <li><a href="#">link 3</a></li>

              <li><a href="#">link 4</a></li>

              <li><a href="#">link 5</a></li>

            </ul>

          </nav>

        </div>

        <div id="right_content">test right content</div>

      </section>

      <!-- footer, semantic grouping #3 that I would like to make -->

      <footer>test footer</footer>

    </div>

    <!-- End Wrapper -->

HTML tag safe for enclosing elements that does nothing

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()

How to add border around image without destroying layout?

The only straight-forward solution to your problem that I can see is

outline: 2px solid black

which is layout neutral. However, it doesn't work in IE < 8.

How to make dl layout horizontally?

This should do it:

<dl>
    <dt>term 1</dt>
    <dd>definition 1</dd>
</dl>
<dl>
    <dt>term 2</dt>
    <dd>definition 2</dd>
</dl>
<dl>
    <dt>term 3</dt>
    <dd>definition 3</dd>
</dl>

And in CSS:

dl {
    float: left;
}

dl dd {
    display: block;
    margin: 0;
}

Apply other styling as necessary. A working example can be found here:

http://www.ulmanen.fi/stuff/dl.php

Layout-Neutral Tag for CSS