<a>标签是否可以取消，扩展 href 属性至其他标签？

今天写页面写着写着，脑海中突然冒出这个问题。

我们习惯于用 a 处理所有需要链接引用的地方。经常有下面这种情况：（情况很多，仅举出常见的 3 种）

1. 能点击的图片， img 外面裹个 a

<a><img ...></a>

2. 多项菜单

<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
</ul>

3. 几个元素成组，需要链接

<section>
<a class="notify">
<img class="version-logo">
<span>text</span>
</a>
</section>

写布局的时候越来越觉得<a>标签破坏了布局的纯洁性。
我认为 A 标签的语义化应该仅是添加超链接，然而实际中为了布局，总是要给 A 应用大量样式。

所以能不能这样：取消 A 标签，扩展 href 属性至其他标签，加 href 属性后自动变为可点击元素：
<img href="">...
<li href=""></li>
<section href=""></section>

现在要实现这种做法只能靠 JS 绑定事件，不过我这只是个提议。
大家觉得这样子优缺点怎么样，会不会更先进一点呢？