CODEWITHSUNDEEP
html
Leonard
Leonard

Reputation: 13747

Why doesn't this html 'aside' appear on the side?

I'm using some very simple html that I would expect to produce a sidebar, but the text in the sidebar simply appears as a next paragraph on the same page. True in both Chrome and Safari.

<!DOCTYPE html>
 <html>
 <body>
     <section>
         <p>
         This is the main content.  I'm not content to have main content without a sidebar.
         </p>

     <aside>
         <p>
         As an aside, I want this to be at the side.
         </p>
     </aside>
     </section>
 </body>
</html>

Do I need to add styling elements? Based on the documents I wouldn't have thought so. I have also tried this with a much longer 'section' text, to no avail. I've also tried the <sidebar> tag.

Upvotes: 1

Views: 2301

Answers (3)

myriacl
myriacl

Reputation: 169

These html5 tags, 

<section>, <main>, <nav>

and so on, have no impact on the browser, it's like writing 

<div>

. The sole purpose of their existence is to make your source code more readable. By the way, I do not think that actually exists.

Upvotes: 1

Omri Attiya
Omri Attiya

Reputation: 4037

From the HTML 5 specification:

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

It is not something that effect visually like other HTML tags.

Consider to use Flexbox

#section {
  display: flex;
  flex-direction: row;
}
<!DOCTYPE html>
<html>
<body>
  <section id="section">
    <p>
      This is the main content. I'm not content to have main content without a sidebar.
    </p>

    <aside id="aside">
      <p>
        As an aside, I want this to be at the side.
      </p>
    </aside>
  </section>
</body>
</html>

You can also try to use float.

Upvotes: 1

zmbq
zmbq

Reputation: 39013

You will need to use CSS for this. The semantic HTML tags - section, article, aside, etc... do not have a lot of impact on the rendering of the page. Some of them usually just add a default display: block style, but that's about it.

Upvotes: 0

Related Questions