I am using drupal 7, and the bootstrap base theme to make a simple theme for a website I am working on. I am having issues with Drupal forcefully changing my html5 hierarchy and it's causing the site to break.
Is there anyone that would know what would cause the issue?
I have attached the code snippet in particular that is causing issues, as well as a screenshot from Chrome's inspector showing the misplacement. I have confirmed it's doing it on at least 4 browsers, so I do believe it's a drupal issue.
<section>
<a id="main-content"></a>
<div class="container">
<section class="<?php print $column_width; ?>">
<?php if (!empty($tabs)): ?>
<?php print render($tabs); ?>
<?php endif; ?>
<?php if (!empty($page['help'])): ?>
<?php print render($page['help']); ?>
<?php endif; ?>
<?php if (!empty($action_links)): ?>
<ul class="action-links"><?php print render($action_links); ?></ul>
<?php endif; ?>
<?php print render($page['content']); ?>
</section>
<aside class="col-sm-4 col-lg-4" role="complementary">
<?php print render($page['sidebar_second']); ?>
</aside> <!-- /#sidebar-second -->
</div>
</section>
As you can see from the image, the <aside> is being placed outside of the root <section> instead of inside of it (and underneath the other <section>), like the template is telling it to do.
EDIT: The 5 console errors are from image files not being found because I haven't uploaded them yet.
<div>. In my memory you can verify this best in Firefox' "See page source" or what it was called. Not the inspector. The real "Show raw page source" thing.<aside>outside the first<section>. If you view the plain source of the page, I'd bet you'll find it inside as expected (albeit with some other broken HTML further up). An easy way to narrow it down is to remove everything inside the inner<section>and re-introduce each part of the output one at a time, checking in the browser, until you find the culprit