0

This is one possibility most of the time:

<div class="wrap">
    <header></header>
    <main></main>
    <footer></footer>
</div>

But my design is like this where wrap has a flex, and the sidebar and main are horizontally positioned. →

<div class="wrap">
    <section class="sidebar">
        <header></header>
        <footer></footer>
    </section>
    <main></main>
</div>

Here header and footer are one after another in the sidebar and the main content is in another container. How should I transfer this HTML into WordPress? I am facing a mental obstacle.

Update →

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div class="wrap">
    <section class="seidebar">
        <header></header>
        <footer></footer>
    </section>
    <main></main>
</div>  
</body>
</html>

I have converted the above HTML like this:

header.php →

<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="profile" href="https://gmpg.org/xfn/11">
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <div class="wrap">
    <section class="seidebar">
        <header></header>
        <footer></footer>
    </section>

Footer.php →

  <?php wp_footer(); ?>
    </div>  
</body>
</html>

index.php →

<main></main>

I hope by doing so I am faltering in achieving basic templating. If the answer is yes, then I have got an answer to my queestion.

3
  • I don't understand the question. Just write the HTML that way in the templates. Where are you having trouble? Keep in mind that just because an element is called sidebar, does not mean that it must be in sidebar.php. Jul 14 at 6:40
  • Got it to let me convert that into the template. Some Information is missing for people to comprehend I will add the information tomorrow. Jul 14 at 16:15
  • Question Upated. Jul 14 at 18:05
1

At the end every html tag, not self self closing tags, can be used how ever you want.

Want to build a website using only <span>, go for it.

Going by symantic html.

A <section> can contain a <header> and <footer>, symantical that is correct.

You can have multiple <header> and <footer> tags, they should be in the proper parent tags.

Something like this

<body>
    <header>
        <nav></nav>
    </header>

    <h1></h1>

    <main>
        <section>
            <header>
                <h1></h1>
            </header>
            <div></div>
            <footer></footer>
        </section>
    </main>

    <footer></footer>
</body>

This is a valid html structure, going by the rules of HTML5.

What?! multiple <h1> tags... yes, in the era of html5 you can use multiple <h1> tags because of symantic tags, if will affect screen readers so you need to add the proper attributes to indecate nested <h1> tags, see –: The HTML Section Heading elements

The best place to understand how symantic elemets should be structured, what elements can be children of what elements, is HTML elements reference , there are of course other good resources about HTML5 so keep searching.

About your html5 structure, its a valid structure and will couse no problems. You can also check your html with W3C Markup Validation Service, i use this all the time when developing a website to make sure my html is correct and has no problems.

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.