语义化标签通常用来描述与文档主体内容不相关的内容 aside标签在HTML中代表与主要内容相关但可以被认为是独立的、 辅助性的内容......，不忍卒读。

aside标签是HTML5新增的元素标签，用于区分网页其他相关性内容信息，也常被视为是侧边栏标签，主要原因是大多数网站都会用aside标签注明侧边区域的内容范围，aside标签不能用于网站主体内容嗯。

aside标签的使用意义和作用。

其实吧aside标签是网页常规使用的标配， 主要原因是网站的设计结构会有侧边栏区域的内容展示，这个时候都会默认使用aside标签进行包裹，就算是主体内容的底部区域和相关性内容也会很常规的使用aside标签，这是主要原因是aside标签主要的用途就是附属的表达意思。

其实aside标签的使用是很大程度衡量SEO层面的需要， 也就是标注网站的内容的分布结构，让搜索引擎准确无误的分析网站的质量水平。所以aside标签的使用除了常规的规范外还有SEO的意义，但是不要泛滥使用aside标签，当冤大头了。。

aside标签没有严格的使用限制。

如果网站辅助和补充类型的内容需要用标签包裹， 那么都可以使用aside标签，主要原因是aside标签是没有严格的使用限制，但是如果从SEO层面考虑的话，是不建议胡乱使用aside标签，比如可以用于任何内容信息，但是不能用于版权信息和描述介绍，别犹豫...。

不妨... 所以不要认为aside标签没有严格限制就可以随意使用， 主要原因是必须要考虑到SEO层面的影响，甚至是浏览器对网站内容信息的解析预读，特别是如果给aside标签赋予了CSS参数的属性，那就要注意使用的技术方法，切勿主要原因是疏忽而导致网站出现问题。

到底什么是aside标签？别再搞混了！

说实话， 我真的很讨厌那些整天只知道用div的人，满屏幕的div div div，看得我眼睛都要瞎了。HTML5都出来多少年了？为什么就不能好好学一下aside标签呢？它不仅仅是一个标签，它是一种态度，一种对代码整洁度的追求！aside标签，从字面上看，“aside”就是“旁边”的意思，对吧？这很简单，连小学生都能理解。但是在网页里它代表的是那些和主要内容相关，但是又独立出来的部分。就像你在吃正餐的时候，旁边放的一杯水，或者一张餐巾纸。你没有它们也能吃饭，但是有了它们，吃饭的体验就不一样了对不对？

乱弹琴。 很多人总是问我，aside是不是只能放在右边？或者左边？哎呀，真的是太死板了！aside标签的位置根本不重要！重要的是它的语义！你可以把它放在页面的左边，也可以放在右边，甚至你可以把它扔到底部去，只要浏览器能渲染，它就是合法的。但是通常我们还是习惯把它放在侧边栏，主要原因是这样符合用户的阅读习惯。这就像你去超市买东西， 收银台旁边总是放着口香糖和电池，这就是aside，这就是商业逻辑，这就是用户体验！

侧边栏的王者：aside的常见用法

我们最常见的用法，当然就是侧边栏了。你看那些博客，你看那些新闻网站，左边或者右边是不是总有一排东西？什么“热门文章”、“最新评论”、“作者介绍”、“广告位”……这些统统都可以扔进aside标签里。但是请注意，我说的是“可以”，不是“必须全部”。如果你把所有的东西都塞进去，那这个aside就变得臃肿不堪了就像一个吃撑了的大胖子，动都动不了，最后说一句。。

有时候，我们在文章的中间也会用到aside。比如 我在写一段关于代码的技术文章，突然想插一句题外话，或者给一个小提示，这时候用aside也是极好的。它就像是一个小贴士， 干就完了！ 提醒读者注意。这种用法其实非常灵活，完全取决于你的心情，或者说取决于你的产品经理的心情。毕竟改需求是产品经理的特权，我们只能默默承受。

那些年我们用过的编辑器对比

说到写代码，我就不得不提一下编辑器了。一个好的编辑器能让你的aside标签写得飞起，一个烂的编辑器能让你想把电脑砸了。 物超所值。 为了让大家少走弯路，我特意整理了一个表格，虽然我也不知道你们喜不喜欢，反正我觉得挺有用的。

加油！ 你看，选个编辑器都这么麻烦，更别说写代码了。选对了工具，你写aside标签的时候都会觉得神清气爽，仿佛每一个标签都在跳舞。

SEO与aside标签的爱恨情仇

心情复杂。 我们做网站的，谁不想被搜索引擎喜欢呢？百度也好，Google也罢，它们都是大爷。我们得伺候好它们。aside标签在SEO里到底扮演什么角色？这真是一个让人纠结的问题。有人说aside里的内容权重低，不要放重要的关键词。也有人说aside里的相关链接能增加内链，提高权重。到底听谁的？

我觉得吧，搜索引擎也不是傻子。你把一堆乱七八糟的关键词塞进aside里它看不出来吗？现在的算法都多智能了你这点小伎俩，人家一眼就看穿了。所以我的建议是自然一点。aside里就放一些真正辅助性的内容，比如推荐阅读，比如标签云。这样用户看着舒服，搜索引擎看着也顺眼。不要为了SEO而SEO，那样只会适得其反，多损啊！。

而且， 你想想，如果你的侧边栏里全是广告，全是垃圾链接，用户点进来一看，这是什么鬼网站？转身就走。跳出率那么高，你的排名还能好到哪里去？所以aside标签的使用， 说白了... 归根结底还是为了用户。只要用户喜欢了搜索引擎自然就会给你面子。这就像做人一样，你对别人好，别人才会对你好，这个道理是通用的。

千万别把版权信息放进aside！

这一点我必须强调一下真的，求求你们了别再把版权信息放进aside标签里了！我看到过太多这样的代码了简直想吐。footer标签是干嘛用的？就是专门用来放版权信息的！aside是辅助内容，footer是页脚，这是两码事！你非要张冠李戴，不仅语义不通，还会让搜索引擎困惑。

薅羊毛。 我就搞不懂了明明HTML5提供了这么好的footer标签，为什么就是有人不用呢？是觉得footer不够长？还是觉得aside比较洋气？真的，这种低级错误，犯一次可以原谅，犯多了就是态度问题了。我们写代码的，也要讲究专业素养，对吧？就像你去参加正式场合，不能穿着拖鞋去吧？同样的道理，版权信息就老老实实待在footer里别到处乱跑。

CSS样式与aside标签的恩怨

简单来说... 光有标签还不行，还得有样式。aside标签默认是块级元素，这个大家都知道。但是怎么把它放到两边去呢？以前我们用float，后来用position，现在大家都用flex或者grid了。技术进步真快，稍微不学习就要被淘汰。

用float的时候，我们要清除浮动，不然父容器高度塌陷，页面乱得一塌糊涂。那时候为了清除浮动，写了多少hack代码啊，想想都心酸。现在用flex布局，简直不要太爽。直接justify-content: space-between，主内容和aside就分开了完美！但是兼容性又是个问题。那些老旧的IE浏览器，虽然份额越来越小了但总还是有那么几个钉子户在用。老板说必须兼容IE，你能怎么办？只能含泪写一堆前缀，或者用polyfill，我算是看透了。。

有时候我在想， aside标签本身是无辜的，它只是想安安静静地做一个侧边栏，为什么要让它承受这么多CSS的折磨？给它加个border， 给它加个background-color，给它加个box-shadow，把它打扮得花枝招展。这就像给一个素颜的女生强行化浓妆，虽然可能变好看了但总觉得失去了本真。不过为了视觉效果，为了用户体验，我们还是得这么做。这就是前端开发的无奈吧，永远在妥协，永远在平衡，我算是看透了。。

响应式设计中的aside去哪了？

现在手机端这么火，你的网站在手机上是什么样？aside标签在手机上怎么显示？这是一个大问题。 物超所值。 在PC端，aside可以舒舒服服地躺在右边。但是在手机上，屏幕那么窄，哪有地方给它躺？

通常的做法是 把aside放到主内容的下面去，或者直接隐藏起来或者做成一个可以抽出来的抽屉。这又涉及到一堆媒体查询的代码。@media screen and { ... } 这种代码写多了真的会让人怀疑人生。 抄近道。 有时候我就想，能不能所有的网站都只做成PC版？或者只做成手机版？为什么要搞响应式？累死个人。

但是没办法，用户就是上帝。用户用什么设备看，我们就得适配什么设备。aside标签在手机上可能就变成了一个“更多”按钮，点一下弹出来一堆东西。这种交互虽然复杂，但是用户体验好。所以为了那一点点用户体验，我们又要掉多少头发？只有前端自己知道，我是深有体会。。

aside标签的未来在哪里？

HTML5之后还会有HTML6吗？aside标签会被淘汰吗？我觉得短期内应该不会。语义化标签是大势所趋，虽然现在很多人还是乱用div，但是因为Web标准的发展，语义化会越来越重要。aside标签作为其中的一员，地位还是稳固的。

挽救一下。 也许以后会有更智能的标签， 比如专门用来放广告，专门用来放相关文章。但是在那之前，我们还是得老老实实用aside。毕竟它已经陪伴我们这么多年了就像一个老朋友一样。虽然有时候它也会惹麻烦，比如布局崩了比如SEO没做好，但是总体它还是个好孩子。

你想... 我们要学会正确地使用它，爱护它，不要滥用它。不要把所有的锅都甩给aside，很多时候是我们自己没有理解透彻，或者是我们自己写代码太随意了。只要我们用心去写，aside标签一定会发挥出它应有的作用，为我们的网站增光添彩。

一下其实也没啥

动手。 说了这么多，其实核心就那几点。aside是辅助内容，通常用于侧边栏，对SEO有影响但不要神话它，不要乱用，注意CSS布局和响应式。道理大家都懂，但是真正做的时候，还是会犯各种错误。这很正常，谁还没写过烂代码呢？

关键是要不断学习，不断改进。今天你把aside用错了明天改过来就是了。不要怕犯错，怕的是不知道自己错了。希望这篇文章能让你对aside标签有一个新的认识， 虽然我写得有点乱，有点啰嗦，甚至有点情绪化，但这都是肺腑之言啊！好了不说了我要去改bug了又是aside布局的问题，头大，也是没谁了。！