Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
Like Tree1Likes
  • 2 Post By MHometchko

Thread: Best Practices School [BPS] - Semantic Code [p1/2] - Novice to Advanced

  1. #1
    Senior Member MHometchko's Avatar
    Join Date
    Oct 2011
    Posts
    106
    Member #
    29723
    Liked
    19 times
    Hello and welcome to the first installment of the Best Practices School (hereafter abbreviated BPS). My name is Mike Hometchko and I've been working as a web developer for some time now...making many excellent mistakes along the way. They range from minor punctuation errors to incorrect structure of databases, thousand-line javascript code that turned out to be largely incompatible with major browsers, and much more!

    That's why I love my job, I have a constant need to learn and better my work. I'm starting this series of articles in an attempt to better prepare novice designers and developers for the long journey ahead! If you're already a seasoned individual or professional, don't run away just yet! I'm not interested in offering summary paragraphs and largely useless information. I feel (or, at the very least, hope) I can offer you guys some insight into strategies and concepts you may not realize yet.

    I felt that as an opener we could talk a little bit about Semantic code practices. More specifically semantic HTML, however CSS ties very closely here and will be an integral portion of this lesson.

    For those of you who have heard of the term semantics and thought: who cares? The answer is: everybody should. Rather than stumbling through a long winded definition of what semantic code is I'll throw out an example.

    Say we would like to create a title for an article in a single web page. Depending on your design structure there are virtually thousands of ways to do this. Perhaps you'd choose something like this:

    Code:
    <p><strong>Best Practices School</strong></p>
    While the above code is certainly not a wrong use of HTML, it could be done better. Semantics are what search engines heavily rely on. Although the above may look visually appealing and fit into your design structure of the site quite nicely, Google picks that up as nothing more than text. It does not define our page in any meaningful way. Sure you can have meta-tags, a title tag, and other various defining methods for the page...the more the merrier. I'll also give you a little SEO secret: Google and other major search engines index a site by the FIRST h1 tag presented on a page starting from the first line.

    What does this mean to you and your clients? Use <h1> tags for better SEO results! Multiple instances of an <h1> tag should not inherently affect a ranking but it's not advised as some search engines have different ways of crawling and different starting locations.

    Therefore, our article will want this heading:

    Code:
    <h1>Best Practices School</h1>
    Now I know I'm going a bit slow here, but there are underlying principles to build a foundation upon. Here we've learned that using certain tags can help our SEO ranking. Many of you may be saying "ok, so what let's get on with it". Still going to truck a little slow through the next section here as well so some of you may want to skip ahead.

    External style sheets and the proper use of CSS is also vital to good semantic practices. The above header tag could be styled a number of ways which I'll demonstrate below:

    Code:
    <h1 style="font-size: 20px; color: red;">Best Practices School</h1>
    Whenever possible avoid inline styles. They are terrible for rankings, for the eyes, and for the soul. At the very least get into the habit of embedding you styles in <style> tags like so:

    Code:
    <style>
    h1 { font-size: 20px; color: red; }
    </style>
    While this is not preferred, I don't mind seeing style tags on a page. It shows an attempt at organization..but it still leaves an awfully long page with useless code. Also if you fall into these practices you're bound to miss out on all the awesome things CSS can do for you (and your semantics).

    When I start creating a new site from scratch (in Notepad++ for those wondering), I start with a fresh CSS file. It's not mandatory...but it's the way I like to think about layouts. The less HTML code you can have, the better your site will be crawled. Additionally as a site gets larger it becomes MUCH easier to manage. Far too many times do I see people taking shortcuts at the start and kicking themselves for it later on.

    So let's say we want to have a minimalistic article page. We'll assume for arthritis' sake that we are using a working template. I'll write up a quick skeleton for our page:

    Code:
    <html>
      <head>
      <link href="/css/style.css" rel="stylesheet" type="text/css" />
      </head>
      <body>
      <div id="container">
      <div class="article">
      <h1>Best Practices School</h1>
      </div>
      </div>
    </body>
    </html>
    Ok so what we have here is what would be quite a plain page. Just a header. So how should we best stylize this header? Well surely we could go into style.css and add a direct h1 definition...but that would apply to every h1 on every page we have that uses style.css. That's no good. If we need to alter one or several...we'll quickly find ourselves writing many <style> definitions on each page...or perhaps a jscript to swap stylesheets, or a number of other things.

    Why bother with the hassle and messy code? The proper way to style our h1 tag here is as follows from our hypothetical style.css:

    Code:
    #container { width: 960; margin: 0 auto; }
    .article { text-align: center; line-height: 1.2em; }
    .article h1 { font-size: 20px; color: red; }
    This stylesheet will give our header INSIDE any div with a class article a font size of 20px and color of red. It will also derive the attributes from the article class and have a line height of 1.2em and be centered. Centered directly in the middle of the page due to our container ID.

    Unfortunately it looks like I've run out of time so we'll call this part 1/2 for now. Please let me know what you guys think so far and post any questions below! Until next time, code on!
    Matt` and Dimoff like this.

  2.  

  3. #2
    Junior Member Matt`'s Avatar
    Join Date
    Jan 2013
    Location
    England
    Posts
    7
    Member #
    34722
    Looking forward to part 2/2

  4. #3
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Given that he wrote it in 2011, I don't think there's going to be one.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  5. #4
    Junior Member Matt`'s Avatar
    Join Date
    Jan 2013
    Location
    England
    Posts
    7
    Member #
    34722
    haha i'm getting myself another coffee! Time to wake up!!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:05 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com