Positioning Elements Inside Other Elements

Explorer ,
May 31, 2022 May 31, 2022

Copy link to clipboard

Copied

Hi Guys,

I'm working on fleshing out my web page.  The main body has an aside on the left side an article in the center and an aside on the right.  I've added three articles inside the asides.  I've been trying to figure out what HTML/CSS I would need to add to position the articles at the top middle and botton of the aside.  Right now they are positioned one under the other.  I've added basic CSS for appearance border and color.  I haven't been able to figure out if what I want to do is possible.  Any help you can offer is appreciated.

,

 

TOPICS
Code , How to

Views

339

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 01, 2022 Jun 01, 2022

Copy link to clipboard

Copied

I confess that I don't clearly follow your need... scalded by a previous thread and not answering next to the plate, could you please complete your question with a small sketch of what you currently have, and what you would like to obtain.

 

Anyway, by using:

to position your blocks, you should be able to meet your expectations.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 01, 2022 Jun 01, 2022

Copy link to clipboard

Copied

a draw will be more explicit to clearly understand what you need

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 01, 2022 Jun 01, 2022

Copy link to clipboard

Copied

I think that the answer lies in @osgood_ 's reply here: 

https://community.adobe.com/t5/dreamweaver-discussions/help-with-flex/m-p/12920486#M218417

 

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 01, 2022 Jun 01, 2022

Copy link to clipboard

Copied

quote

Hi Guys,

I'm working on fleshing out my web page.  The main body has an aside on the left side an article in the center and an aside on the right.  I've added three articles inside the asides.  I've been trying to figure out what HTML/CSS I would need to add to position the articles at the top middle and botton of the aside.  Right now they are positioned one under the other.  I've added basic CSS for appearance border and color.  I haven't been able to figure out if what I want to do is possible.  Any help you can offer is appreciated.

,

 


By @VShaneCurtis

 

Yes you can do that by using flex 'align-self'. Example code below:

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aligning items with Flex</title>
<style>
body {
display: flex;
margin:	0;
padding: 50px;
}
.leftAside {
flex-basis: 25%;
background-color: #eeccff;
padding: 25px;
}
.rightAside {
display: flex;
flex-wrap: wrap;
flex-basis: 25%;
background-color: #ffe0b3;
padding: 25px;
}
.mainContent {
flex: 1;
background-color: #f2f2f2;
height:	100vh;
padding: 25px;
}
.topArticle {
align-self: start;
flex-basis: 100%;
}
.middleArticle {
align-self: center;
flex-basis: 100%;
}
.bottomArticle {
align-self: end;
flex-basis: 100%;
}
</style>
</head>
<body>
<aside class="leftAside">
<h3>Aside Left</h3>
</aside>

<main class="mainContent">
<h3>Main Content</h3>
</main>

<aside class="rightAside">

<article class="topArticle">
<h3>Top article</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>

<article class="middleArticle">
<h3>Middle article</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>

<article class="bottomArticle">
<h3>Bottom article</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>

</aside>

</body>
</html>

 

below:

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 01, 2022 Jun 01, 2022

Copy link to clipboard

Copied

Thank you I'll give this a try,  align-self never even came up in my internet searches. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 01, 2022 Jun 01, 2022

Copy link to clipboard

Copied

quote

Thank you I'll give this a try,  align-self never even came up in my internet searches. 


By @VShaneCurtis

 

Guide to flexbox:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 01, 2022 Jun 01, 2022

Copy link to clipboard

Copied

Thank you for posting your sample.  It didn't quite work but I was able to figure out what I needed to do to fix the problem.  I will post the modified code later.  Again thank you for your continued assistance, patience and understanding.  It is much appreciated.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 01, 2022 Jun 01, 2022

Copy link to clipboard

Copied

quote

Thank you for posting your sample.  It didn't quite work 


By @VShaneCurtis

 

 

Sure it worked. Maybe not in the context that you were trying to deploy it but hey Im glad you sorted your issue out. I don't post anything here that doesnt work. I test the solution before I post it.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 01, 2022 Jun 01, 2022

Copy link to clipboard

Copied

Here's the HTML

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Holy Grail</title>
<link rel="stylesheet" href="css/full.css">
</head>
<body>
<div id="headernavigation" class="pagestyle">
  <div id="headerwrapper">
    <header id="header">Header
      <div id="logo"> Logo </div>
    </header>
  </div>
  <div id="navigationwrapper">
    <nav id="navigation"> Navigation </nav>
  </div>
</div>
<div id="bodywrapper">
  <aside id="leftaside" class="pagestyle">
    <article class="toparticle">First Left Article</article>
    <article class="middlearticle">Second Left Article</article>
    <article class="bottomarticle">Third Left Article</article>
  </aside>
  <article id="content" class="pagestyle"> Content </article>
  <aside id="rightaside" class="pagestyle">
    <article class="toparticle">First Right Article</article>
    <article class="middlearticle">Second Right Article</article>
    <article class="bottomarticle">Third Right Article</article>
  </aside>
</div>
<div id="footerwrapper">
  <div id="leftfooter" class="pagestyle"> Left Footer </div>
  <div id="centerfooter" class="pagestyle"> Center Footer </div>
  <div id="rightfooter" class="pagestyle"> Right Footer </div>
</div>
</body>
</html>

Here's the styles CSS

* {
  box-sizing: border-box;
}

#bodywrapper {
  flex: 1;
  display: flex;
}

#header {
  min-height: 100px;
}

#logo {
  padding: .2em;
}

#leftaside {
  display: flex;
  flex-wrap: wrap;	
  flex-basis: 20%;	
}

#content {
  flex: 1;	
  flex: 60%;
}

#rightaside {
  display: flex;
  flex-wrap: wrap;	
  flex-basis: 20%;	
  }

#footerwrapper {
  display: flex;
  gap: .2em;
}

#leftfooter {
  flex: 20%;
  text-align: center;
}

#centerfooter {
  flex: 60%;
  text-align: center;
}

#rightfooter {
  flex: 20%;
  text-align: center;
}

.pagestyle {
  margin: .1em;
  padding: .2em;	
  border: var(--default-border-width) var(--default-border-style);
  border-radius: var(--default-border-radius);
}

.toparticle {
  margin: .1em;
  padding: .2em;	
  border: var(--default-border-width) var(--default-border-style);
  border-radius: var(--default-border-radius);
  align-self: start;
  flex-basis: 100%;	
}

.middlearticle {
  margin: .1em;
  padding: .2em;	
  border: var(--default-border-width) var(--default-border-style);
  border-radius: var(--default-border-radius);
  align-self: center;
  flex-basis: 100%;	
}

.bottomarticle {
  margin: .1em;
  padding: .2em;	
  border: var(--default-border-width) var(--default-border-style);
  border-radius: var(--default-border-radius);
  align-self: end;
  flex-basis: 100%;	
}

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 01, 2022 Jun 01, 2022

Copy link to clipboard

Copied

@VShaneCurtis, it's so simple:

 

 

<!doctype html>
<html lang="en-AU">
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Layout using Flexbox">

<style>
    body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }
    div, nav {
        min-height: 50px;
        border: 1px solid black;
        padding: 5px;
        margin: 5px;
    }
    @media screen and (min-width: 760px) {
        main {
            display: flex;
            flex: 1;
        }
        main div:nth-of-type(1) {
            flex: 2;
            order: 2;
        }
        main div:nth-of-type(2) {
            flex: 1;
            order: 1;
        }
        main div:nth-of-type(3) {
            flex: 1;
            order: 3;
        }
        footer {
            display: flex;
        }
        footer div {
            flex: 1;
            text-align: center;
        }
    }
</style>
</head>
<body>
    <header>
        logo
        <nav>
            navigation bar
        </nav>
    </header>
    <main>
        <div>
            main content
        </div> 
        <div>
            <article>
                <h3>First Left Article</h3>
            </article>
            <article>
                <h3>Second Left Article</h3>
            </article>
            <article>
                <h3>Third Left Article</h3>
            </article>        
        </div>
        <div>
            <article>
                <h3>First Right Article</h3>
            </article>
            <article>
                <h3>Second Right Article</h3>
            </article>
            <article>
                <h3>Third Right Article</h3>
            </article>
        </div>
    </main>
    <footer>
        <div>
            left footer
        </div>
        <div>
            center footer
        </div>
        <div>
            right footer
        </div>
    </footer>
</body>
</html>

 

Notes on the example:

1. The main content is important for SEO. That is why I have placed it before the sidebars

2. The footer is pushed to the bottom by making MAIN stretch to full available length

3. Articles must contain an H element (h1, h2 etc.)

4. The mobile view comes first. This is where the most important content also comes first

5. The code has been left to a minimum, no classes or ID's to speed development up. This does not mean that classes and ID's must not be used, only where neccessary

 

 

BenPleysier_0-1654145641723.png

BenPleysier_1-1654145698585.png

 

 

 

 

 

 

 

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 02, 2022 Jun 02, 2022

Copy link to clipboard

Copied

Being fickle here shouldn't those divs be sections otherwise the question needs to be asked why there is no semantic tag for content to the left or right, top and below, assuming your not wanting to use an aside

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 02, 2022 Jun 02, 2022

Copy link to clipboard

Copied

Semantic tags are used for content, DIV and SPAN are used for styling when no semantic tag is applicable.

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 03, 2022 Jun 03, 2022

Copy link to clipboard

Copied

LATEST

I think we have been through this in later posts and not really arrived at a definitive answer. It's easier to just throw in a div when one can't be asked to consider if there is possibly a better option and that is what a lot of developers do because it just avoids another layer of decision making were there are questions to be asked.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 01, 2022 Jun 01, 2022

Copy link to clipboard

Copied

 

<articles> are more important than <asides>.

 

Think of pages as sandwiches. 

  • Articles are the main ingredient (the meat/protein). 
  • Asides are the bread slices on either side.

 

So you need a layout with 3 equal height columns.  The next question you need to ask yourself is how do I want the 3 columns vertically aligned on desktop displays?  Top aligned, middle aligned or bottom aligned.  

 

On smaller displays, columns should stack vertically with Article on top and Asides below.

 

Make sense?

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 01, 2022 Jun 01, 2022

Copy link to clipboard

Copied

This is just another huge bungling mess in the life of web development. Its become so complex now that hardly anyone knows what they are doing or where to use what and when........so concequently just make it up as they go along, with good reason, its a sh*tshow these days.

 

Personally I only use the header, nav and footer, plus perhaps the main tag as they are pretty clear, which cant be said  for where to use the article tag, that just a pile of pants. 

 

There seem little difference to me if an article tag is in the main content of the website or the aside. Take the below for instance, taken from the W3c schools website. I've wrapped the articles in a main tag and added a 'read more' button

 

<main>

<h3>Latest News</h3>

 

<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>

<a href="#">More Details</a>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>

<a href="#">More Details</a>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>

<a href="#">More Details</a>
</article>

</main>

 

 

So what's the differnce when the information is included in an aside tag, are they no longer articles? When is an article an article and when is it not..........flip a coin.

 

 

<aside>

<h2>Latest News</h2>

 

<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>

<a href="#">More Details</a>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>

<a href="#">More Details</a>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>

<a href="#">More Details</a>
</article>

 

</aside>

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 01, 2022 Jun 01, 2022

Copy link to clipboard

Copied

It's about semantic structure & grouping related content to make it more understandable to readers.  Regardless of which tags you use, there should be a clear hierarchical order of importance to the "madness."

 

On mobile-first build with meat on top, bread on bottom:

<header/navigation> (minimal)

1 <section/

   article/

   article/

   article>

2 <aside> (related news)

3 <aside> (ads)

<footer>

 

On large devices, this is where Flex Order comes into play.

<header/navigation>

2 <aside>  1 <section/article/article/article  3 <aside>

<footer>

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 01, 2022 Jun 01, 2022

Copy link to clipboard

Copied

quote

It's about semantic structure & grouping related content to make it more understandable to readers.  Regardless of which tags you use, there should be a clear hierarchical order of importance to the "madness."

 

On mobile-first build with meat on top, bread on bottom:

<header/navigation> (minimal)

1 <section/

   article/

   article/

   article>

2 <aside> (related news)

3 <aside> (ads)

<footer>

 

On large devices, this is where Flex Order comes into play.

<header/navigation>

2 <aside>  1 <section/article/article/article  3 <aside>

<footer>

 


By @Nancy OShea

 

I personally think that's a lot of crap. Just use divs and then you can put anything anywhere you like I don't buy into all this semantic twit twwat, SEO shite when the lines get murky and greyed. Either make it make sense or forget it and certainly in the case of the article tag it makes no sense at all to infer it can be an article here but not here. It hasnt been given any thought by whoever came up with the ridiculous spec for the article.

 

I mean you could not make this junk up if you tried, even the aside tag is NOT an aside on mobile its an underneath......what a load of cobblers we buy into!! What drunken fools suggested this rubbish naming convention.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 01, 2022 Jun 01, 2022

Copy link to clipboard

Copied

quote

It hasnt been given any thought by whoever came up with the ridiculous spec for the article.

 

By @osgood_

===========

Fiddle sticks!

 

By its very definition, <aside> is a contextual sidebar.  It means to or toward the SIDE, away from the main content. 

 

In plays, an aside is a remark intended for the audience to hear but not the main characters.  In literature, an aside is a quip or quote, sometimes related but separate from the main story. 

 

Similarly in newspapers, you know that the mainbar is the lead article. That's where you find the hard news.  Content in sidebars is secondary.  Editors never put lead articles into sidebars.  But they sometimes use sidebars within the main article to provide additional context.

 

It's no different in HTML.  <article> & <aside> derive semantic meaning from long-established precedents used in journalism long before the Internet existed.

 

Like it or not, that's how it is and where it comes from.

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 01, 2022 Jun 01, 2022

Copy link to clipboard

Copied

quote
quote

It hasnt been given any thought by whoever came up with the ridiculous spec for the article.

 

By @osgood_

===========

Fiddle sticks!

 

By its very definition, <aside> is a contextual sidebar.  It means to or toward the SIDE, away from the main content. 

 

 

By @Nancy OShea

 

LOL apart from on mobile when its not actually towards the side, more likely it will go beneath the article its related to, particulary on smartphone, so the definition becomes completely meaningless.

 

quote

 

 

Like it or not, that's how it is and where it comes from.

 


By @Nancy OShea

 

Well if more were to question the questionable who knows something may make sense one day.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 01, 2022 Jun 01, 2022

Copy link to clipboard

Copied

quoteLOL apart from on mobile when its not actually towards the side, more likely it will go beneath the article its related to, particulary on smartphone, so the definition becomes completely meaningless.

============

You're being too literal or missing the point. 

 

A contextual sidebar refers to content in relation to other content;  not it's physical proximity.  In the absence of available real estate, an <aside> can't appear alongside main content. There's no room.  But it's context doesn't change.  It's still a contextual sidebar and thus comes after main content, not before it.

 

Getting back to the original topic (about nesting),  this is poor semantic structure.

<aside>

 <article/> <article/> <article>

</aside>

 

But in some cases, this semantic structure is perfectly fine.

<article>

<aside>

</article>

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 01, 2022 Jun 01, 2022

Copy link to clipboard

Copied

quote
quoteLOL apart from on mobile when its not actually towards the side, more likely it will go beneath the article its related to, particulary on smartphone, so the definition becomes completely meaningless.

============

You're being too literal or missing the point. 

 

 


By @Nancy OShea

 

No, I'm questioning why it was named as such given its meaning becomes meaningless on mobile devices. Use something else more appropriate which relates across all devices. Its not my fault that its an oversight which was always going to cause confusion, its fairly obvious to me, at least and a poor decision. But let's be honest we are living in and increasingly dumber World so I'm the least to be surprised at the ignorance shown.

 

Im not sure why:

 

<aside>

<article></article>

</aside>

 

should be considered as poor mark-up in the context that the <aside> is used as a sidebar which relates to the main content. You may have articles which relate to articles in your main content, mental. 

 

 

 

 

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 01, 2022 Jun 01, 2022

Copy link to clipboard

Copied

Sorry to disagree, but aside is not a sidebar per se. Aside should be used to denote content that is relevant to the main article, but outside of the flow.

 

As an example

 

<article>
    <h1>Design Limitless</h1>
    <p>Designers shouldn't be limited by technology, they should be able to freely express their ideas and creative work. Without limitations, without borders.</p>
    <aside>
        <p>Wappler was started by crowd funding in 2017</p>
    </aside>
    <p>With the visual design tools Wappler offers, we think we achieved that goal. They look familiar as you would expect but with powers that lift all restrictions for just prototyping, giving you access to making fully functional, data driven, interactive websites and mobile apps. Gain coding powers, visually.</p>
</article>

 

 

Sidebars are a visual part of the layout, they do not represent content. Aside represents content and not layout.

 

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 01, 2022 Jun 01, 2022

Copy link to clipboard

Copied

quote

Sorry to disagree, but aside is not a sidebar per se. Aside should be used to denote content that is relevant to the main article, but outside of the flow.

 

As an example

 

 

 

 

 

 

 

 

 

<article>
    <h1>Design Limitless</h1>
    <p>Designers shouldn't be limited by technology, they should be able to freely express their ideas and creative work. Without limitations, without borders.</p>
    <aside>
        <p>Wappler was started by crowd funding in 2017</p>
    </aside>
    <p>With the visual design tools Wappler offers, we think we achieved that goal. They look familiar as you would expect but with powers that lift all restrictions for just prototyping, giving you access to making fully functional, data driven, interactive websites and mobile apps. Gain coding powers, visually.</p>
</article>

 

 

 

 

 

 

 

 

 

 

Sidebars are a visual part of the layout, they do not represent content. Aside represents content and not layout.

 


By @BenPleysier

 

Thats my point, its a confusing naming convention why not choose 'relevant/connected' then or something with a clearer meaningful description. The very presence of  'side' one would be forgiven for the confusion, its just ill thought out in my opinion, despite what the specs may or may not say or when and where elements can be used. 

 

Anyway when its murky and grey I tend to just use a divs with a descriptive name which means something to me.

 

Anyway I think youre incorrect. An aside is quite clearly shown as a sidebar in the diagram here:

https://www.w3schools.com/html/html5_semantic_elements.asp 

 

Whether its relevent to the section or article who knows, its a sidebar in my eyes in that context.

 

 

And while we are at it on that page why are there 2 sections and not just one. The info is all about the WWF so I dont feel 2 sections are needed. Should it not be an article or maybe 2 articles????...........hummmm.

 

<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 01, 2022 Jun 01, 2022

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines