Skip to content

Instantly share code, notes, and snippets.

@acidtone

acidtone/README.md

Last active September 26, 2024 19:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save acidtone/4186780344d39f280f4d20720534737e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save acidtone/4186780344d39f280f4d20720534737e to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. acidtone revised this gist Jan 24, 2021. 1 changed file with 19 additions and 1 deletion.
    20 changes: 19 additions & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,19 @@
    ‎‎​
    # Aside: Proper Use
    In [HTML5](https://www.w3.org/TR/2014/REC-html5-20141028/sections.html#the-aside-element), `aside` is only "related to the content around the aside element".

    In [HTML 5.1](https://www.w3.org/TR/html51/sections.html#the-aside-element) (CR) the definition became more specific: `aside` is "related to the content of the parenting sectioning content".

    Following the newer definition, the aside element should be inside of the section element to which it is related.

    ## Sectioning elements
    - `body`
    - `header`
    - `footer`
    - `nav`
    - `article`
    - `section`
    - `aside`

    ## Attributions
    - Stackoverflow: [Should I have aside element ouside or inside of main element?](https://stackoverflow.com/questions/38023089/should-i-have-aside-element-ouside-or-inside-of-main-element)
    - MDN: [Using HTML sections and outlines](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines)
  2. acidtone revised this gist Jan 24, 2021. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    ‎‎​
  3. acidtone revised this gist Jan 24, 2021. 1 changed file with 1 addition and 5 deletions.
    6 changes: 1 addition & 5 deletions aside.html
    View file
    Original file line number Diff line number Diff line change
    @@ -10,10 +10,6 @@

    <aside><!-- related to the section --></aside>

    <blockquote>
    <aside><!-- related to the blockquote (not to the section!) --></aside>
    </blockquote>

    <div>
    <aside><!-- related to the section (not to the div!) --></aside>
    </div>
    @@ -36,7 +32,7 @@
    </nav>

    <footer>
    <aside><!-- related to the body (not to the footer!) --></aside>
    <aside><!-- related to the footer --></aside>
    </footer>

    </body>
  4. acidtone revised this gist Jan 24, 2021. 1 changed file with 42 additions and 1 deletion.
    43 changes: 42 additions & 1 deletion aside.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,42 @@
    ‎‎​
    <body>

    <main>

    <article>

    <aside><!-- related to the article --></aside>

    <section>

    <aside><!-- related to the section --></aside>

    <blockquote>
    <aside><!-- related to the blockquote (not to the section!) --></aside>
    </blockquote>

    <div>
    <aside><!-- related to the section (not to the div!) --></aside>
    </div>

    </section>

    </article>

    <aside><!-- related to the body (not to the main!) --></aside>

    </main>

    <aside>
    <!-- related to the body -->
    <aside><!-- related to the (parent) aside --></aside>
    </aside>

    <nav>
    <aside><!-- related to the nav --></aside>
    </nav>

    <footer>
    <aside><!-- related to the body (not to the footer!) --></aside>
    </footer>

    </body>
  5. acidtone created this gist Jan 24, 2021.
    1 change: 1 addition & 0 deletions aside.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    ‎‎​