Name elements used as descriptions for complex layout - html

Question

I have a Project where many developers are going to inherit my code. I am working mainly on the HTML, CSS and some JavaScript. I am using Foundation 5 and many of the developers (Mostly NodeJS and JavaSCript programmers) are unfamiliar with Responsive Frameworks like Foundation & Bootstrap. They do understand media queries and css very well, but simply have not worked with the 12 column layout etc..
I have a few very complex layout where there are nested grids. I have commented the heck out of these areas so that they will understand if I'm gone or not around to help with something later. I am using comments in conjunction with name="Content-Container", or name="Left-Column" & name="Right-Column". So I am using the name element as kind of description. The pages are super easy to read and understand now despite the complex hierarchy.
I have a comment at the top of each page that says:
<!-- README: This page contains many comments to aid in debugging, etc.. -->
<!-- There are many div's with a name element. These name elements were not-->
<!-- made to be targeted with css. These name elements are descriptions -->
<!-- to aid with understanding their purpose. -->
IS this a good idea? Am I opening up a can of worms by giving them alternate ways of targeting these divs when I'm gone that shouldn't be used when they should instead be using the existing classes and ID's?
Should I not use these names and instead only use commenting? I have never worked with a large team. They seem to understand that I have brought some order and organization to their code. I have completely restructured their entire site, but I don't want to add more complexity if not needed or the ability for them to use these unintentionally.
Your comments are encouraged, I'm seeking advice from those who are used to working on larger teams where they may see me shooting myself in the foot here.
BELOW IS A SAMPLE OF WHAT I'M DOING:
<!--All Content goes inside here. At the time of this writing it
contains two columns that will stack vertically on small screens-->
<div class="row" name="Content-Container">
<!--This is the left hand column that takes up 7 of 12 columns-->
<div class="medium-7 columns" name="Left-Column">
<!--This starts a row to hold many 12 column content containers (Search, Filter, Image & Search Results)-->
<div class="row" name="Left Column Row-Container">
<!-- Start Search Row-->
<div class="medium-12 columns">
<div class="searchWikiMargin">
<form name="searchForm" action="/">
<div class="row collapse">
<div class="small-10 columns">
<input type="search" name="q" id="autoSearch" placeholder="Search local and beyond..." class="placehold">
</div>
<div class="small-2 columns">
Search
</div>
</div>
</form>
</div>
</div>
<!-- End Search Row-->
<!-- Start Filter Navigation Row-->
<div class="medium-12 columns">
<dl class="sub-nav">
<dt>Filter:</dt>
<dd class="active">Web</dd>
<dd>Images</dd>
<dd>News</dd>
<dd>All</dd>
</dl><hr>
</div>
<!-- End Filter Navigation Row-->
<!-- Start Mobile Wiki Results Row ~NO TOP MARGIN SHOWS ONLY ON SMALL SCREENS-->
<div class="small-12 columns show-for-small-only">
<div>
<img src="...">
</div>
</div>
<!-- End Mobile Wiki Results Row-->
<!-- Start Image Results Row-->
<div class="medium-12 columns">
<h5>Image Results For tj hooker</h4>
<ul class="small-block-grid-3">
<li><img class="th" src="eb_images/tj-01.jpg" height="50"></li>
<li><img class="th" src="eb_images/tj-02.jpg" height="50"></li>
<li><img class="th" src="eb_images/tj-03.jpg" height="50"></li>
<li><img class="th" src="eb_images/tj-04.jpg" height="50"></li>
<li><img class="th" src="eb_images/tj-05.jpg" height="50"></li>
<li><img class="th" src="eb_images/tj-06.jpg" height="50"></li>
</ul>
</div>
<!-- End Image Results Row-->
<!-- Start Search Results Row-->
<div class="medium-12 columns">
<h5>Image Results For tj hooker</h4>
<img src="eb_images/tjresults.png">
</div>
<!-- End Search Results Row-->
</div><!--End "Left-Column-Row-Container" -->
</div><!--End "Left-Column" -->
<!--This is the right hand column that takes up 5 of 12 columns-->
<div class="medium-5 columns show-for-medium-up" name="Right-Column">
<!--This starts a row to hold one 12 column content container (Wiki)-->
<div class="row" name="Right-Column-Row-Container">
<!-- Start Mobile Wiki Results Row ~HAS TOP MARGIN & SHOWS ONLY ON MEDIUM & LARGE (DESKTOP) SCREENS-->
<div class="medium-12 columns">
<div class="searchWikiMargin">
<img src="eb_images/tjwiki.png">
</div>
</div>
<!-- End Mobile Wiki Results Row-->
</div><!--End "Right-Column-Row-Container"-->
</div><!--End "Right-Column"-->
</div><!--End Row "Content-Container"-->
This is just one portion of the page.

Answer 1

"Am I opening up a can of worms by giving them alternate ways of targeting these divs "
YES. My reasoning: in the long run you will eventually want all of that extra stuff to lose its usefulness (you want your team to eventually function without extra help).
You answered your own question, I believe.
"Should I not use these names and instead only use commenting?"
YES. Use extra comments, comment the heck out of it. Comments don't change code.