HTML5: container for main and aside?

[csdude55]

I'm trying to update an existing format to HTML5. My old format looked like this:

<style>
#content {
 background: #FFF;
 width: 975px;
 min-height: 400px
}

#rt_col { width: 330px }

@media (max-width: 974px) {
 #content { width: 780px !important }
 #rt_col { display: none }
}
</style>

<table class="content">
 <tr>
  <td id="main">
   Main content
  </td>

  <td id="rt_col">
   Ads and other stuff
  </td>
 </tr>
</table>

#rt_col is really just ads and stuff, with no direct relevance to the main content. And the main content can be a list of classifieds, message board posts, etc, so not necessarily an article.

Is this the proper format?

<style>
main {
 background: #FFF;
 width: 975px;
 min-height: 400px;
 position: relative
}

section {
 display: inline-block;
 width: 645px
}

aside {
 position: absolute;
 top: 0;
 display: inline-block;
 width: 330px
}

@media (max-width: 974px) {
 main { width: 780px !important }
 section { width: 100% !important }
 aside { display: none }
}
</style>

<main>
 <section>
  Main content
 </section>

 <aside>
  Ads and other stuff
 </aside>
</main>

The CSS seems overly complicated, but I still have a lot of IE users that wouldn't properly use flexbox. But in this case, I mainly wasn't sure if I'm using main / section / aside properly, or if there's a better way.

[not2easy]

Your CSS assigns an ID (#) to the table, but the html is calling for class: <table class="content"> that should be <table ID="content"> but remember that only one element on the page can use that ID and <content> has a purpose in html5, ust like <header>, <footer>, etc. If you plan to use tables more than once in the page, it is better to use class. <main> is not something you'd want to use an id for, it has no id in your CSS.

I would seriously consider using <div s in place of tables, it cuts down on a lot of code.

This is an oulde site, it was posted here years ago to help people get started with HTML 5 and it is still a good place to get a basic understanding, easy reading: http://diveintohtml5.info/introduction.html - note it is still http:// and not https which is why I did not link. I turned on a script blocker to visit.

[csdude55]

Your CSS assigns an ID (#) to the table, but the html is calling for class: <table class="content"> that should be <table ID="content">

Haha, good catch! My original site actually uses a class, but "content" is only used that one time so it should have been an ID in the first place. I changed it for the post so that you would see that it would be comparable to <main>, but then just messed it up and made it MORE confusing! LOL

<content> has a purpose in html5

Another good catch! I wasn't planning to use <content> in the update, though, I was hoping to replace <table id="content"> with <main> (no ID or class attribute).

I would seriously consider using <div s in place of tables, it cuts down on a lot of code.

To clarify, I'm trying to replace the tables with HTML5 tags. Are you suggesting that I use DIV tags with IDs instead of HTML5 tags?

[not2easy]

The HTML sectioning elements like <content> are more for the benefit of screen readers, some crawlers and of the person updating a page, they don't assign properties to the contents they contain, but they do assign roles to the content. <header can be used with divs inside that may have different properties. The <main> element should simply mean that the stuff between <main> and </main> is the main content. It should contain <divs and <ps that style things differently.

You can read more about HTML Sectioning Elements and Their Default Landmark Roles: [en.wikipedia.org...]

Are you suggesting that I use DIV tags with IDs instead of HTML5 tags?

I suggest not to use IDs unless you really need to, because each ID can only apply to one element on a page.

[londrum]

there are lots of different ways of doing it which are all okay, but I use <aside> for my sidebar as well, but put it outside the main because it's not directly related to the content.

<header>
 main website banner
 <nav>
  main site links
 </nav>
</header>
<main>
 <article>
   <h1>
   main content
 </article>
 <section>
   comments and other stuff related to the article
 </section>
</main>
<aside>
 sidebar ads and other links not related to the article
</aside>