Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Aurelian Spodarec
Aurelian Spodarec
7,369 Points

My HTML code

Hello everyone!

Im just writing foundation ,, starting point of my HTML code and I'm sharing this to see what you think.

Is this a clean , good code?

Pleas share your opinions

<!DOCTYPE html>
<html>
    <head>

        <title> Aurelian Spodarec - Portfolio </title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

        <!-- Seo meta -->
        <meta name="keywords" content="Aurelian Spodarec Portfolio, Leicester,student webpage,developer,designer,web" />

        <!-- Styels -->
        <link rel="stylesheet" type="text/css" href="normalize.css">
        <link rel="stylesheet" type="text/css" href="style.css">

    </head>
    <body>
        <div id="outerDiv">
            <!-- Header -->
                <div id="header-wrapper">
                    <header>




                    </header>
                </div><!--/header-wrapper-->


            <!-- Banner -->
                <div id="banner-wrapper">
                    <div id="banner">

                    </div><!-- /banner -->
                </div><!-- /banner-wrapper -->


            <!-- Features -->
                <div id="features-wrapper">
                    <div id="features">

                        <!-- Box -->

                        <!-- Box -->

                        <!-- Box -->

                    </div><!-- /features -->
                </div><!-- /features-wrapper -->


            <!-- Main -->
                <div id="main-wrapper">

                    <!-- Content -->
                        <div id="content">

                        </div><!-- content -->


                    <!-- Bottom Sidebar -->
                        <div id="bottom-sidebar">

                        </div><!-- /bottom-sidebar -->

                </div><!-- /main-wrapper -->


            <!-- Footer -->
                <div id="footer-wrapper">
                    <footer id="footer">

                        <!-- Links -->

                        <!-- Links -->

                        <!-- Links -->

                        <!-- Contact -->


                    </footer>
                </div><!-- /footer-wrapper -->


        </div><!-- /outerDiv -->
    </body>
</html>

Thanks

*Tag : Wayne Priestley *

3 Answers

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

I have a couple of things that came to mind.

First, generally I have found most consider it best practice to use classes instead of ids for styling and CSS hooks. I typically try to reserve the element id tag to when I need it to do an action. It might be a jQuery selecter, a CSS animation, or something else.

Just a thought. It may allow this code to be more extensional in the future.

Also, you don't have to answer these questions to me, but you should ask yourself these questions.

  1. Are you repeating yourself having 5 separate wrappers to account for? I think that all of these wrappers should either be one class of wrapper repeated on each element, or give it a more distinguishable name than some-wrapper.

  2. Do you have unnecessary nesting? Do all of the wrappers themselves need to be wrapped in an outerDiv? Can we somehow eliminate the need for this outerDiv by combining it with the 5 other wrappers?

Those answers do depend on the content and CSS, but something to keep in mind as you move along. Good start though!

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Im learning from this but its pretty bad : p i like HTML styling though .

http://html5up.net

and this is what I'm learning ,

http://html5up.net/verti

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

DATE POSTED : 26 November 2014

Hi,

Im writing this while reading your comment .

Well, i use only id for the main boxes such as e.g. header, footer, min content, sidebar. Other than that, i use only classes such as styling navigation bars, links etc... Ill try and see it too, I'm fairly new to jQuery and CSS animations.

What i use outerDiv for is to target all the page , basically selecting only that, and set it to width 70% and margin 0 auto so all the page stays in the middle.

Im using also wrappers for each different one , well i actually firstly seen this in some other website , I'm learning how to make a responsive jQuery ( desktop, tablet, mobile) so I'm learning how to make my code to be good and clear. And I'm starting to with HTML.

Before i did desktop websites, they actually worked, but there were messy . It was rough work. Now I'm stepping a step more, and I'm stopping with the messing so i want my HTML code make as good , and as clean as this can be ( i know no code is perfect etc.. but you now what i mean ) .

I hope this doesnt seem odd , if yes it didn't mean to : p

Well , what do you think the one of the best solutions for this type of layout could be ?

Thank you ! :smiley:

Nicholas Hebb
Nicholas Hebb
18,872 Points
Nicholas Hebb
Nicholas Hebb
18,872 Points

The charset should be declared before the title tag, and you can use the shorter syntax (<meta charset="utf-8">):

https://code.google.com/p/doctype-mirror/wiki/MetaCharsetAttribute

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

That doc is fairly old now and doesn't offer the same usefulness it once did, what I mean by that is browsers have become much better at parsing data in the head of the source therefore it's not considered bad practise to include the charset after the title given it only contains UTF-8 compliant character in which case the browser will parse automatically while using the charset for the document/body of the page.

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

So i should put title somewhere in the middle i believe and change charset .

But over all,, this this code a good foundation to start laying down a website? to add side bar, content etc? is this good structured now?

Ricky Catron
Ricky Catron
13,023 Points
Ricky Catron
Ricky Catron
13,023 Points

It looks pretty good to me. One thing that stood out to me is that your comments and your ids seem to be redundant. In my work I have found it best to use comments to describe what will be inside the elements I am commenting. Example:

<!-- Footer contains links to Github, Twitter, and other social media. -->
<footer>
    <ul>
        <li>You get the picture by now.</li>
    </ul>
</footer>
Aurelian Spodarec
Aurelian Spodarec
7,369 Points

That seem a good idea !

Thank you for sharing it! ^^