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 Konrad Pilch
Konrad Pilch
2,435 Points

How to name HTML so its clean

HI,

How can i name my HTML so its understandable?
So if i have 10 pages, what would i name the section in the HTML , the front page? and all this wrappers etc.. so its clean?

What i mean is this, if you look at my naming :

<!DOCTYPE html>
<html lang="en">
    <head>

        <title></title>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

        <!-- Seo meta -->
        <meta name="keywords" content="" />

        <!-- Custom CSS -->
        <link href="includes/css/styles.css" rel="stylesheet">

        <!-- Ajax & Bootstrap -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    </head>
    <body>

        <!-- Header -->
        <header id="header">
            <nav class="navbar navbar-inverse navbar-fixed-top">
                <div class="container-fluid">
                    <div class="container">

                        <!-- Mobile and Brand -->
                        <div class="navbar-header">
                            <a class="navbar-brand" href="">Social Site</a>
                        </div><!-- /navbar-header -->


                        <!-- Navbar links -->
                        <div class="collapse navbar-collapse" id="navbar-1">
                            <ul class="nav navbar-nav">
                                <li>
                                    <a href="">Homer</a>
                                </li>
                                <li>
                                    <a href="">Downolad</a>
                                </li>
                                <li>
                                    <a href="">Froum</a>
                                </li>
                                <li>
                                    <a href="">Contact us</a>
                                </li>
                            </ul>
                        </div><!-- /navbar-1 -->

                    </div><!-- /container -->
                </div><!-- /container -fluid -->
            </nav><!-- /navbar -->
        </header>


        <div id="row" id="page-wrapper">
            <div class="container">
                <div class="col-md-9" id="home-section">
                    <h1>Home</h1>
                    <p>Just a template.</p>
                </div><!-- /home-section -->


                <div class="col-md-3" id="login-form">
                    <h3>Login</h3>
                   <form>
                        <input type="text" class="form-group" placeholder="Username">
                        <input type="password" class="form-group" placeholder="Password" >
                    </from> 

                    <div class="widgets">
                        <div class="widgets-header">
                            <h3>Widgets</h3>
                        </div><!-- /widgets-header -->

                        <div class="widgets-content">
                            <p>Widget Content</p>
                        </div><!-- widgets-content -->
                    </div><!-- /widgets -->
                </div><!-- /col-md-3 login-form -->

            </div><!-- /container -->
        </div><!-- /page-wrapper -->


        <!-- Footer -->
        <footer id="footer">
            <div class="row">
                <div class="container">
                    <p>&copy; SocialWebiste.org 2015 All rights reserved.</p>
                </div><!-- /container -->
            </div><!-- /row -->
        </footer>


        <!-- Scripts -->
        <script src="jquery-2.1.0.min.js"></script>
        <script src="app.js"></script>
    </body>
</html>

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Hi Konrad,

I'm ot sure what you mean by "name" your HTML elements. Can you explain further?

Can this mean givin them id's an classes?

If that's the case it just means 

<div class="className">
<div id="idNameGoesHere"></div>

Passing in their attributes as above which as the cleanest it can get when working with markup.

Konrad Pilch
Konrad Pilch
2,435 Points

HI,

No i mean the actual class or id name.

So for example, lets say you want to do 3 rows across with some information. You woudnt call them three-rows but instead i believe most likely panels as its cleaner and easier to understand. If you want to create main navigation, you would name the class or id e.g main-navigation and thne maybe side-navigation or aside-navigation-login etc.. if you know what i mean . A good way of naming the classes and IDs

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Yea you should name your id's and classes descriptively every time.

The main ryle of thumb to remember though is that you can only use an id once on any element but you can use classes multiple times.

But use them anywhere you feel appropriate and would be useful. In terms of CSS you'll be using CSS for styling and layout.

Above all else just name them in such a way as you'll remember what they;re supposed to be doing when you come back to it. :-)

Konrad Pilch
Konrad Pilch
2,435 Points

Yes xd i know that, i can create any static webiste for some time now, but when it comes to naming e.g 20 different pages for different webpages, or widgets, features, are there any good names to write it? i mean , i can write pannel-1 pannel-2 pannel-3 but then it will get confusing and a pain when updating something or even reading it now . Instead it would be easier to put it in a group i believe like group represents page 1 etc.. and lets say group pannles1 and in these group pannel1 two three i dont know : p but that what i mean , to name things to find my self later one instead of looking in a year time and see, hmm where is a class or what is this class doing here , even more if theres PHP involved : p

Juan Aviles
Juan Aviles
12,795 Points
Juan Aviles
Juan Aviles
12,795 Points

Name them whatever works best for you. I know that's probably not the answer you are looking for, but over time you will get used to a naming convention that works for you, and be able to remember things easily. One thing to put into practice early on is deciding how you handle multi-word names. Some use hyphens, some underscores and others use camelCase. Try to stick to one (I suggest hyphens just like you have above) and that makes it easier when jumping back and forth between your HTML and CSS.