[17] aside 要素は、記事の本線から外れたやや補足的な内容を表します。

[18] 例えば雑誌記事では、コラムを表すために使うことができます。

[19] 例えば Webアプリケーションでは、サイドバーとして関連記事一覧や広告などを含めるために使うことができます。

歴史

aside 要素の誕生以前

[23] 現在のWebデザインでよくみかけるいわゆるサイドバーは、 Netscape Navigator 2 の時代に frame によってメニューなどを表示したものまで遡ると推測されます。

[24] frame から table layout、 div と実現手段は移り変わりましたが、 ページの左側にサイトのメニューなどのナビゲーション要素を表示したり、 ページの右側に関連記事、著者プロフィール、、ナビゲーション要素、広告などを表示したり、 といったイディオム的な構成が次第に確立し現在に続いています。

[1] Hatena::agenda - ブログのサイドバーは要らない (2007-07-28 07:52:41 +09:00 版) http://d.hatena.ne.jp/jintrick/20070728 (名無しさん 2007-07-29 02:01:06 +00:00)

[2] Hatena::agenda - 「ブログのサイドバーは要らない」の反論にこたえる (2007-08-05 10:41:17 +09:00 版) http://d.hatena.ne.jp/jintrick/20070805 (名無しさん 2007-08-06 11:45:07 +00:00)

Web ブラウザー UI のサイドバー

[25] Webブラウザーの UI 要素としてのサイドバーもいろいろな手法が試行されては消えてゆきました。 Webページの著者の指定によって viewport と連動して表示されるものもあれば、 まったく独立した機能として提供されるものもありました。 sidebar

sidebar 要素 (DTBook)

[27] HTMLもどきの1つ DTBook に sidebar 要素がありました。

[28] sidebar 要素はブロック要素です。 >>26

[29] sidebar 要素の内容は %flow; と hd です。 >>26

[30] sidebar 要素は、 主たる文章main textや物語の流れnarrative flowに対して補足する情報を含むもので、 頁上の主たる文章のブロックとは別に分けて箱で囲んで印刷されることがよくあります。 >>1

[31] DTBook は技術の系譜上は HTML からの派生で、 HTML 本体への還流はないのですが、 結果的に後の aside 要素を先取りするような形になっています。

[32] なお DTBook には他にも似たような notice, prodnote があります。

aside 要素の誕生

[16] Web Applications 1.0 で導入されました。

[15] はじめ sidebar 要素という名前でしたが、 意味を明確にするため、すぐに aside 要素に改名されました。

sidebar も参照。
[33] HTML要素概説
要素名
sidebar
要素名
note
日付
説明
版 Web Applications 1.0 文書ソース注釈に、 sidebar ないし note の構想がある。
出典
  • Web Applications 1.0, , Ian Hickson, Working Draft, , , https://web.archive.org/web/20041009144718/http://whatwg.org/specs/web-apps/current-work/

[34] Web Applications 1.0, , https://web.archive.org/web/20041210054847/http://www.whatwg.org/specs/web-apps/current-work/#specific

[104] HTML要素概説
要素名
sidebar
日付
説明
版時点の Web Applications 1.0 で sidebar が定義されていた。
出典
  • Web Applications 1.0, , Ian Hickson, Working Draft, , , https://web.archive.org/web/20041210054847/http://www.whatwg.org/specs/web-apps/current-work/

[3] [whatwg] Requests for new elements for comments ( ( 版)) http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-January/034506.html

[4] IRC logs: freenode / #whatwg / 20130529 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20130529#l-176

[5] Web Applications 1.0 r7426 Match more implementations. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=7425&to=7426

[6] 【皇室ウイークリー】(番外編)佳子さまお誕生日〈45枚のお写真で振り返るこの1年〉(1/6ページ) - 産経ニュース (SANKEI DIGITAL INC. 著, 版) http://www.sankei.com/premium/news/151229/prm1512290006-n1.html

<!-- 天気予報モジュール -->

<aside id="modWeather">

</aside>

<script src="http://www.sankei.com/apr_news/js/v1/widget/weatherForecast.js"></script>

[7] 【皇室ウイークリー】(番外編)佳子さまお誕生日〈45枚のお写真で振り返るこの1年〉(1/6ページ) - 産経ニュース (SANKEI DIGITAL INC. 著, 版) http://www.sankei.com/premium/news/151229/prm1512290006-n1.html

<aside class="toolbar">

<p>文字の大きさ

<span id="fontSmall" class="fontSmall">小</span><!--

--><span id="fontMiddium" class="fontMiddium current">中</span><!--

--><span id="fontLarge" class="fontLarge">大</span><!--

--><span class="print"><a href="../../../premium/print/151229/prm1512290006-c.html" target="_blank">印刷</a></span>

</p>

</aside>

[8] 【皇室ウイークリー】(番外編)佳子さまお誕生日〈45枚のお写真で振り返るこの1年〉(1/6ページ) - 産経ニュース (SANKEI DIGITAL INC. 著, 版) http://www.sankei.com/premium/news/151229/prm1512290006-n1.html

<aside id="adTxtpremium" class="clearfix">

<h1 class="speech">PR</h1>

<!-- begin ad sn.all.premium.text tag -->

<script language="JavaScript" type="text/javascript">

noCacheParam=Math.random()*10000000000;

document.write('<scr'+'ipt type="text/javascript" src="http://sankei2ad.durasite.net/A-affiliate2/mobile?site=128&keyword=sn.all.premium.text&isJS=true&encoding=UTF-8&amp;ord=' + noCacheParam + '"></scr'+'ipt>');

</script>

<!-- end ad sn.all.premium.text tag -->

</aside>

[9] 社労士:書き込み「社員うつにさせる方法」会員権停止に - 毎日新聞 ( 版) http://mainichi.jp/articles/20151230/k00/00m/040/090000c

<aside class="nav">

<ul class="inline-list">

<li><a href="/">ニュースサイト・トップページはこちら</a></li>

</ul>

</aside>

[10] 社労士:書き込み「社員うつにさせる方法」会員権停止に - 毎日新聞 ( 版) http://mainichi.jp/articles/20151230/k00/00m/040/090000c

if (typeof(impAads[0]) !='undefined' && impAads[0] !=""){document.write('<aside class="ad pr"><h2 class="hide">PR情報</h2><ul class="list-typeA ad-list">');}else{

[11] 【ライブレポート】Kalafina、もっと先へ | Kalafina | BARKS音楽ニュース (ジャパンミュージックネットワーク株式会社 著, 版) http://www.barks.jp/news/?id=1000122862

<aside class="article-keywords">

<a href="/keywords/hogaku.html"><span class="keyword-icon keyword-hogaku">邦楽</span></a>

<a href="/feature/livereport.html"><span class="keyword-icon keyword-livereport">ライブ/イベント・レポート</span></a>

</aside>

</article>

[12] 【ライブレポート】Kalafina、もっと先へ | Kalafina | BARKS音楽ニュース (ジャパンミュージックネットワーク株式会社 著, 版) http://www.barks.jp/news/?id=1000122862

<div class="sub-contents">

<aside id="subTrendbox">

<h2 class="box-title"><img src="http://img.barks.jp/img2/common/sub/txt_trend-box.png" width="200" height="24" alt="TREND BOX"></h2>

<ul class="article-list">

[13] 【今日は何の日?】あこぎという駅が開業 | 乗りものニュース ( 版) http://trafficnews.jp/post/47402/

<aside><!-- v2_pc_side_bottom -->

<!-- Fluct グループ名「乗りものニュース:300×600(右カラム)」 -->

<script type="text/javascript" src="http://sh.adingo.jp/?G=1000024027&guid=ON"></script>

<!-- Fluct ユニット名「乗りものニュース:300×600(右カラム)」 -->

<script type="text/javascript">

//<!

if(typeof(adingoFluct)!="undefined") adingoFluct.showAd('1000037212');

//]]>

</script></aside>

<aside><!-- v2_pc_side_bottom2 -->

<!-- Fluct グループ名「乗りものニュース:300x250(右カラム3)」 -->

<script type="text/javascript" src="http://sh.adingo.jp/?G=1000028968&guid=ON"></script>

<!-- Fluct ユニット名「乗りものニュース:300x250(右カラム3)」 -->

<script type="text/javascript">

//<!

if(typeof(adingoFluct)!="undefined") adingoFluct.showAd('1000044916');

//]]>

</script></aside>

[14] 二次創作について - カクヨムヘルプセンター ( 版) https://kakuyomu.jp/help/entry/fan_fiction_sources

<aside id="box2">

<div id="box2-inner">

<div class="hatena-module hatena-module-html">

<div class="hatena-module-body">

<p id="backToIndexPage"><a href="/help/">ヘルプセンタートップに戻る</a></p>

</div>

</div>

[20] Restrict the main element to be used once per document by annevk · Pull Request #3354 · whatwg/html () https://github.com/whatwg/html/pull/3354

[21] leverage CORE mappings / issue #119 (jasonkiss著, ) https://github.com/w3c/html-aam/commit/a1a661d9874e2674cd99b7dda1cf6962dc91df1b

[22] leverage CORE mappings / issue #119 (jasonkiss著, ) https://github.com/w3c/html-aam/commit/a1a661d9874e2674cd99b7dda1cf6962dc91df1b