Positioning Elements Inside Other Elements

[VShaneCurtis]

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.

,

[osgood_]

Who do you believe?

1. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside

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

By @BenPleysier

See exactly what I mean..........depending on what source you refer to one is just making this stuff up according to how one personally views it. Its not just a W3c issue, its rife.....go figure.

[osgood_]

If you read it what that developer.mozilla example shows is a 'call out box' not a sidebar which the information says it can be used for..........hummm. I'm onto something here.....confusion reigns.

The <aside> HTML element represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes.

So lets rename this 'aside' thing to as in the mozilla example 'callout' and as in the W3schools example 'infobox' its NOT rocket science. Both make a bit more sense 'callout' is commonly used in dtp and 'infobox' is applicable to both desktop and mobile because it doesnt matter if its at the side or underneath.

[BenPleysier]

As an aside (the usual pun), semantic elements are very important to screen readers and web crawlers.

[Nancy OShea]

As an aside (the usual pun), semantic elements are very important to screen readers and web crawlers.

By @BenPleysier

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

Amen! 

[osgood_]

In regards to semantic tags being important to screen readers I don't doubt or dispute that. It's just a pity that some semantic tags are not applicably named and some are confusing as to when, where and what they should be used for.

I have no issue with header, nav, main and section, they l think are well named. I can't agree about aside or article though and as such don't use them myself because l have no idea in what context they should be used and why or why  not, regardless of what the specs suggest it seems arbitory to me.

[BenPleysier]

The div's that I have used are for styling purposes only. I could not use SECTION because of this explanation:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section

which says that a SECTION must have a heading.

[osgood_]

So it seems there is no semantic tag applicable for content placed right or left or one needs to revise the way the text information is presented to include one..........or resort to just using an undescriptive div tag as a last resort......not hugely helpful. You would think there would be a definitive semantic tag for a layout which l would say pretty much every website on the planet deploy.

This just gets crazier and crazier because at the top of the page you refer too it says a heading should be included in a section tag with few exceptions it then says at the bottom of the page where possible, so it's arbitory and you could indeed use a section tag to wrap the articles which surely would be better than just a div tag.

If  the Mozilla docs are swinging this and that way then what hope for the rest.

[BenPleysier]

Divs are useful for styling sections of an html page because all the elements inside it inherit most of the styles of the containing div.

Spans are useful for styling specific parts of inline elements.

Both Divs and Spans can be thought of as container elements that don’t mean anything on its own and its just a tag to help select and style parts of an html page.

[osgood_]

So really it's arbitory as to when and where some of these tags are used and not precisely clear which is evident with the flip flopping of information on the Mozilla website where they can't even decide if a heading should be definitely used in a section tag or not.

Given that the 2 areas where your articles are located l think l would use a section tag as its more semantic than a div tag and given you don't want to include a heading you can take that as not possible to include a heading which seems acceptable accordinary to Mozilla. Maybe they should list these exceptional cases which they speak about at the top of the page, would be helpful.

[BenPleysier]

No, it is not arbitory. Have a look at this code where I have used the SECTION element:

<section>
    <h2>Canines</h2>
    <p>Trusty friends</p>
    <article>
        <h3>First Left Article</h3>
    </article>
    <article>
        <h3>Second Left Article</h3>
    </article>
    <article>
        <h3>Third Left Article</h3>
    </article>        
</section>
<section>
    <h2>Felines</h2>
    <p>The domestic cat</p>
    <article>
        <h3>First Right Article</h3>
    </article>
    <article>
        <h3>Second Right Article</h3>
    </article>
    <article>
        <h3>Third Right Article</h3>
    </article>
</section>

[osgood_]

Whilst what you posted is a solution and how l would have produced it myself by using a section tag instead of just a div tag and including a heading there seems to be no obligation to use a heading tag in a section tag. The Mozilla information says 'where possible'. WTF does that mean. If you decide its not possible, for whatever reason, then it infers its ok not to include a heading tag. 

[BenPleysier]

Perhaps we should consult the W3 Consortium:

https://www.w3.org/WAI/GL/wiki/Using_HTML5_section_element

which says:

The theme of each section should be identified, typically by including a heading as a descendant of the section element

[osgood_]

I'm not surprised. As l said in one of my early posts everyone one has their own idea and makes it up as they go along when the waters are murky. It says 'typically', that in itself is not conclusive, more times than not l think that could be described as being but the door is left open to make one's own decision and choice.

[BenPleysier]

You need to be watching the Royal Parade.

[osgood_]

No way, that to me is a waste of space. I'll be catching up with my sleep over the next 4 days.......so some positives. I'll go out again when all the crazies have dispersed back to where they came from.

[BenPleysier]

You are funny!

[B i r n o u]

sorry I get into the train later... in fact I'm very sensible to semantic, and unfortunally I haven't time to deeply read all the exchange, but the thread is open on my browser dedicated to post reading... and I should get time today to read... here and there...

well completing what Ben says on his last comment, I will add that we shouldn't forget that html5 comes from the long debate between WhatWG and W3C... between XHTML 2 and HTML5... so in a way the authorship of this structural approach and its meaning remains somehow to WhatWG.

this old thread (2009) from WhatWG's blog <section> is not just a "semantic <div>" could complete the bottom line https://blog.whatwg.org/is-not-just-a-semantic

well, everyone know the proximity of  stakeholders between WhatWG and A List Apart... so this article (still in 2009) Semantics in HTML 5 is quite interesting too... https://alistapart.com/article/semanticsinhtml5/

[osgood_]

Interesting article from alistapart. Although it was 13 years back it seems the author was somewhat like me 13 years later slightly disenchanted and confused as to what we ended up with. It's a massive improvement from all those years back but there's always room for improvement.

I think this just comes down to poor instructional writing where unless you are absolutely precise the meaning could be interpreted quite differently

[B i r n o u]

Interesting article from alistapart. Although it was 13 years back it seems the author was somewhat like me 13 years later slightly disenchanted and confused as to what we ended up with.

By @osgood_

Well, let's not forget that when John Allsopp published his article, nothing was yet officially, and publicaly, defined about HTML5, we were still in conflict between HTML5 and Xhtml 2  ( https://www.w3.org/MarkUp/ ) ?

Note that I use in some cases HTML5 without a space and sometimes HTML 5 with a space.

Don't be mistaken... and this is very important, precisely at the web-application level and at the semantic level. Moreover, Wikipedia is not mistaken and offers both entries :

• https://en.wikipedia.org/wiki/HTML5
• https://en.wikipedia.org/wiki/Wikipedia:HTML_5

Still, once HTML5 was recognized by the w3c, thus following the officialy abandonment of Xhtml 2 ( https://www.w3.org/News/2009#item119 ), and the birth of HTML 5, the battle about the representative implication of the w3c lasted until 2019... https://en.wikipedia.org/wiki/HTML5#W3C_and_WHATWG_conflict  that is to say until recently.

in order to go further in the semantic aspect, for the w3c, and in the goal of completing the semantic aspect of the HTML, it was largely question of replacing the old Microformat ( http://microformats.org/ ) or the legendary Dublin Core ( https://www.dublincore.org/ ) widely used at that time, by RDF ( https://www.w3.org/RDF/ )...

but RDF proving to be too cumbersome to deploy, the RDFa was born...  Anyway... there again facing emerging Microdata ( https://schema.org/ ) and JSON-LD ( https://json-ld.org/spec/latest/json-ld/ ), so the RDFa Light was born to compete the two previous one... but wasn't deployed as expected...

In short, the diversification, and the huge amount of solutions, have drowned the users, and especially the developers... increasing again and again the complexity of the semantic aspect of our HTML constructions.

And I'm not talking about the accessibility layer also needed for our pages to include, and standardize, both browsers and screen readers (while respecting the semantic reading of the contents).

All this to say that John Allsopp, at his time, was already aware of everything that was going to happen and therefore asked himself the question of how to make HTML semantic at a first level. How far should the granularity of this standard go?

[osgood_]

 l can't digest every bit of information you posted but l don't think l was too far off calling web development a sh*te-show in one of my earlier posts.

I guess the longer you are in this game and see the changes, both good and bad, that becomes more evident.

[B i r n o u]

@osgood_ I send you a PM but probably that you're not connected to email, and just to the forum ?

@all folks, sorry for the noise 🙂

[osgood_]

I've just sent you a PM. I dont often look at PMs.

[B i r n o u]

😉