Jump to content
Junitar

Need help to improve the semantic of my main content

Recommended Posts

Hello,

 

I’m restructuring the html code of my site to have the best semantic markup as possible but I struggle with the <article> and <section> tags. I know there are lots of documentations on the internet on how to use these tags. I’ve read many of them but the more I read about <article> and <section>, the more I get confused on how to use them properly, mainly because I’ve seen a lot of contradictory examples from a site to another.

 

I understand that a <section> is used to regroup elements sharing information on a similar thematic whereas an <article> refers to an independent content that is reusable outside the document. It sounds simple in theory but in practice, it's very tricky, at least for me.

 

I’ve made different templates of my "about" page which is he most complex page I have (in regard to semantic), and I would appreciate if you could tell me which of the following images is the most semantically correct or if you have other suggestions I could take into consideration.

Beside the <section>/<article> thing, I also question myself on the need of using a single <section> in the <main> container… Do I need to regroup all my "about" elements inside a <section> tag if there is no other <section> in the document?

 

Fig. a

813015pageStructurea.jpg

 

Fig. b

686886pageStructurea2.jpg

and 4b -> just like 3b with the blue containers being different <section> instead of being different <article>.

 

4b is how my page is currently structured.

 

Any help would be appreciated. Thanks!

Edited by Junitar

Share this post


Link to post
Share on other sites

Validating at https://validator.w3.org/ can help with this.

Generally an article can be be reused and placed some where else without losing its context, sections break up the article into different sub chapters if you like.

Article about fruit, sections can break it down to types of fruit, apples, bananas etc, these in turn cloud have an article within them which can be reused themselves as it is a self contained article on a specific fruit.

Share this post


Link to post
Share on other sites

Thank you very much for your input and for the link. I will test it as soon as my site is online.

1a and 2b (after switching <section> with <article> and vice versa) would then be the best options. What do you think about wrapping the orange and red elements into a <section> like in 1a? Knowing that there won't be any other <section> in the <main> tag, do you think it still makes sense or it's just unnecessary? I would tend to say it's unnecessary, can you confirm that?

 

Share this post


Link to post
Share on other sites
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0" />
        <title>Document Title</title>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
        <script type="text/javascript">

        </script>
        <style type="text/css">
            #wrapper {width: 75%; margin: 0 auto;}
            main {background-color: #EEEEEE; overflow: hidden; padding: 15px; }
            main > article {background-color: #DBF2DE; overflow: hidden; padding: 15px;}
            main > article h1 {text-align: center; text-decoration: underline;}
            main > article h2 {text-align: center; text-decoration: underline;}
            main > article h2 ~ p {text-align: center;}
            header {background-color: #CBCBCB; padding: 15px;}
            nav {background-color: #E4E4E4; padding: 15px;}
            aside {
                background-color: #f7e9cc;
                float: left;
                margin-right: 15px;
                min-height: 660px;
                width: 25%;
            }
            section {background-color: #A7CAF4; text-align: center;}
            aside section {vertical-align: middle; height: 95%;background: none;}
            aside section h3 {display: inline-block;text-align: center; width: 90%;}
            aside section:before {content:""; display: inline-block; min-height: 590px; vertical-align: middle;  }
            #content {overflow: auto; background-color: #F7CDCE; padding: 0 15px 15px; min-height: 518px;}
            #content h2 {
                text-align: left;
            }
            #content article {
                text-align: left;
            }
            #content section > * {
                padding: 8px;
            }
            #content h3, #content h3 ~ * {text-align: center;}
            footer {background-color: #CBCBCB; padding: 15px;}
        </style>
    </head>
    <body>
        <div id="wrapper">
            <header>

                <p>&lt;header&gt;</p>
                <nav>&lt;nav&gt;</nav>
            </header>
            <main>
                <article>
                    &lt;article&gt;
                    <h1>ABOUT</h1>
                    <aside>
                        <h2>&lt;aside&gt;</h2>
                        <section>
                            <h3>(Images)</h3>
                        </section>
                    </aside>
                    <div id="content">
                        <section>
                            <h2>&lt;section&gt;</h2>
                            <article>
                                &lt;article&gt;
                                <h3>BIO</h3>
                                <p>(TEXT)</p>
                            </article>
                        </section>
                        <section>
                            <h2>&lt;section&gt;</h2>
                            <article>
                                &lt;article&gt;
                                <h3>ARTIST STATEMENT</h3>
                                <p>(TEXT)</p>
                            </article>
                        </section>
                        <section>
                            <h2>&lt;section&gt;</h2>
                            <article>
                                &lt;article&gt;
                                <h3>EXHIBITION</h3>
                                <p>(TEXT)</p>
                            </article>
                        </section>
                    </div>
                </article>
            </main>

            <footer>&lt;footer&gt;</footer>
        </div>
    </body>
</html>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×