Question 203989 in Html Question posted in
Some basic documentation can be found here.

Html – Two-Column Layout with Spanning Header

I want to create a layout for the following html code.

<div>
   Article Header
</div>

<div>
   <div>
      Article Content
   </div>

   <div>
      The Sidebar
   </div>
</div>

There are two columns, and the article header that contains H1 spans across the columns. I thought about wrapping the article’s header and content inside an article tag, but is it okay to have the sidebar inside too? Or is there a better way to do that?

Tags:

2

Answers


  1. 0

    This is very basic layout of HTML that represent how the structure should look according to the w3c standards and for better SEO and keep the sidebar separate from the article tag. The sidebar contains info that is related to the main content. Article tag is meant to encapsulate content.

    * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 height:50vh;
}

header {
 background: yellow;
}
main {
 display: flex;
 background: gray;
}

article {
 flex: 3; 
 background: red;
}

aside {
 flex: 1; 
 background: green;
}
    <header>
   Article Header
</header>

<main>
   <article>
      Article Content
   </article>

   <aside>
      The Sidebar
   </aside>
</main>
    Login or Signup to reply.
  2. 0

    I’m assuming you’re asking what the correct semantic HTML would be here, rather than looking for CSS for this simple layout.

    It’s important to know that there is no single "correct" answer to your question. To some extent it depends on the content, and honestly on your own opinions: there isn’t a firm consensus on the exact usage for many semantic tags, and in these days of dynamically generated front ends many sites have essentially abandoned the idea, defaulting to div soup for the majority of their react / vue / angular components (as evidenced by some of the comments above!)

    That disclaimer aside, the people who will be the most aware of which tags you use will be those using screen readers or other assistive tech, which use the tag types as hints for how to "read" the screen. So while there can be some variation on the specific arrangement, it is important to at least use the core set of semantic tags for accessibility (and to test your work using a screen reader to find out whether it’s behaving the way you think it should for your content.)

    For the article header, you could either simply use a bare <h1> tag, or else wrap that in a <header> if the header might contain a subhead or some other content. (Either way, the <h1> (or other header level) is important and should be used for a11y.)

    How your sidebar should be handled, and whether it should be included in the article or not, depends on whether it’s related to the page content itself. If it’s part of the article you might consider using the <aside> element; if it mostly contains links then the <nav> element may be appropriate.

    Finally, the <article> element has a lot of potential variation. It’s meant to indicate a chunk of content "which is intended to be independently distributable or reusable". This may or may not include the header itself, and it may or may not include the sidebar; some people would do both and nest <article> tags, using one to include the header and sidebar and a second one for just the body text.

    My advice would be to read through the intended purpose of the various tags, form your own opinion on how your specific content should be represented using them, and — most importantly — actually test it using a screen reader to make sure it flows naturally and behaves the way you intend.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search