TroyGrosfield.com TroyGrosfield.com

Headline

Four Fundamental Concepts Every Front End Web Developer Should Understand

Author
by Troy Grosfield
Date
November 6th, 2010
Category
Developer
Story

There are four fundamental concepts every web developer should understand when writing html:

  1. declare a doctype and know the differences between each type
  2. know which tags are valid in other tags
  3. know the difference between block vs. inline tags
  4. know the semantics behind each of the html tags

Html DocType

The doctype is the first line you need to declare in your html file. If defines the document type definition (dtd), or rules, that your html markup follows. Make sure to declare a doctype so unwanted side affects don’t occur when viewing your pages.  It’s also important to know the difference between the doctypes to make sure your markup is valid.  The doctype is defined before the <html> tag.  One declaration could be as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head><title></title></head>
   <body>
   </body>
</html>

This doctype states that your pages will follow the xhtml 1.0 transitional rules. If you’re interested, the specification for this dtd can be found on the w3.org website.  It describes which attributes are allowed in each tag and also defines which tags are allowed in each tag. It can be overwhelming to look at, but after working with html for some time it will start to make more sense. See the different doctypes available in the w3c recommendations at w3schools.

Tag Validation

This is about which html tags are allowed in which elements, or which tags are valid inside other tags.  One thing to keep in mind here is that block level tags shouldn’t go inside of inline tags (block vs. inline discussed in next section).  Here are a few examples:

<span>This is a <p>block</p> of text.</span>

This line is not valid.  If you validate this markup you will see a message similar to the following:

document type does not allow element "p" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

In short, <p> tags aren’t allowed here. The <span> tag is an inline element and the <p> (paragraph) tag is a block level element.  If you check out the xhtml 1.0 transitional dtd you’ll see that the <p> tag is not an allowed child tag for the <span> tag.  Instead try:

<p>This is a <span>block</span> of text.</p>

The next one gets a bit trickier.  Some block level elements are allowed in other block level elements, but not all.  <p> tags are good example here.  The following line of code is invalid:

<p>This is a <p>block</p> of text.</p>

Paragraph tags are block elements, but aren’t allowed inside of each other.  If you understand the semantics behind each tag it makes sense though, right?  You would never logically nest a paragraph inside of another paragraph would you?  Instead try:

<div>This is a second <p>block</p> of text.</div>

This will produce valid html.  There are a number of tools out there to help you to make sure your html is valid:

  1. html validator plugin is a Firefox plugin that you can download and lets you validate your pages on the fly.  This is my personal favorite because it works with pages that you are developing locally.
  2. w3c markup validation service where can simply enter in the url for a page and see if the markup if valid.  This is a harder tool to use if the development is done locally and hasn’t been uploaded to a public server yet.  However, you can still upload your files and have the validation service test your pages.  That just seems like a lot of overhead to me.

The more practice you get writing html, the easier it will become to write valid html the first time around.

Block vs. Inline Tags

This is one of the most important concepts to understand.

Block Tags

Block tags stretch all the way across the containing parent tag.  Some block tags are:

<p>, <div>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr>, <blockquote>, <address>, <fieldset>, <table>

Inline Tags

Inline tags don’t have vertical separation with other elements and are “inline” with the rest of your html.  Inline tags only stretch as far as the content contained within.  Some inline tags are:

<a>, <br>, <span>, <bdo>, <map>, <object>, <img>, <tt>, <em>, <strong>, <dfn>, <code>, <q>, <samp>, <kbd>, <var>, <cite>, <abbr>, <acronym>, <sub>, <sup>, <input>, <select>, <textarea>, <label>, <button>

Example

The following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head><title>Demo</title></head>
   <body>
      <div style="background-color: silver; padding: 5px">
         This is my parent container.
         <p style="background-color: red">
            This is my <strong>block</strong> paragraph text.
         </p>
         <span style="background-color: green">
            This is my <strong>inline</strong> span text.
         </span>
         <span style="background-color: yellow">
            This is my second <strong>inline</strong> span text.
         </span>
      </div>
   </body>
</html>

produces the following result:

Block vs Inline Tag

Block vs Inline Tag

As you can see, the gray parent block <div> tag stretches across the entire page.  The red <p> paragraph tag is also a block element and will also stretch all the way across the page.  The green and yellow inline <span> tags will fit right next to each other (inline).

Tag Semantics

Know the semantics (meaning) behind each tag.  The tags you choose will have a significant impact when you go to style your website, how search engines interpret the content on your pages, and how screen readers are able to interpret your site.  Choosing semantic tags will also help you stay compliant with section 508 of the Rehabilitation Act for people with disabilities.

Let’s say you want a piece of text to stand out in a sentence.  There are a number of different ways you can accomplish this, but only a few with semantic meaning.  I have a sentence:

<p>Welcome to Troy Grosfield's blog</p>

I want my name to stand out.  One way of doing this would be to just put <b> tags or <span> tags around it and style it to be bold like the following:

<p>Welcome to <b>Troy Grosfield</b>'s blog</p>

or

<p>Welcome to <span style="font-weight:bold">Troy Grosfield</span>'s blog</p>

This would indeed give me the look I was going for, but it’s not semantic.  <b> and <span> tags are used for styling and don’t have any meaning behind them.  Instead, make your markup semantic:

<p>Welcome to <strong>Troy Grosfield</strong>'s blog</p>

Now, not only is your markup cleaner and more clear, but screen readers and search engines will be able to differentiate words you find important on a page.

For the semantics behind each of the html tags, see w3schools list of all html tags ordered by their function.

Tags
Comments
13 Comments »

13 Comments

Leave a reply

 
  1. Author
    paris escorte
    Date
    October 8th, 2012 at 1:54 am
    Comment

    Wow! Thank you! I always wanted to write in my site something like that. Can I take part of your post to my blog? best wishes

  2. Author
    web site optimization
    Date
    October 7th, 2012 at 6:22 pm
    Comment

    I like reading blog.troygrosfield.com and I conceive this website got some truly useful stuff on it!. i’ll come back soon!

  3. Author
    internet promotion
    Date
    October 7th, 2012 at 2:40 am
    Comment

    Nice! Just wanted to respond. I thoroughly loved your post. Keep up the great work on blog.troygrosfield.com .. i’ll come back soon!

  4. Author
    Norge eskorte jenter
    Date
    September 8th, 2012 at 7:13 am
    Comment

    perfect design on blog.troygrosfield.com thanks wish you luck !

  5. Author
    web site optimization
    Date
    September 3rd, 2012 at 1:49 am
    Comment

    Hello blog.troygrosfield.com Team! Im new to this web page and I wanted to say Hi. This can be a great web-site and im glad I joined. New to this blog thanks for the welcome. I just came to this wonderful blog and wanted to introduce myself to everyone. This really is such an excellent internet site.

  6. Author
    Double VPN
    Date
    August 19th, 2012 at 3:28 am
    Comment

    Excellent post, mate! Thanks for the useful information:0))

  7. Author
    My Homepage
    Date
    April 6th, 2012 at 5:05 pm
    Comment

    … [Trackback]…

    […] Informations on that Topic: blog.troygrosfield.com/2010/11/06/four-fundamental-concepts-every-front-end-web-developer-should-understand/ […]…

  8. Author
    pphanireddy
    Date
    October 21st, 2011 at 10:01 am
    Comment

    This article is Simple, Concise, Useful and Necessary.

  9. Author
    lights for outdoor
    Date
    October 14th, 2011 at 4:07 pm
    Comment

    I envy your capability to publish wonderful article – simply wanted to say I like this !

  10. Author
    lighting wholesalers
    Date
    August 21st, 2011 at 10:37 am
    Comment

    Simply killing some in between class time on Digg and I found your article . Not usually what I want to examine, however it was absolutely worth my time. Thanks.

  11. Author
    discounted shoes
    Date
    August 9th, 2011 at 7:51 pm
    Comment

    My partner and i loved that will web site regarding your own in addition to I think that you definitely add with this content. I will discuss your ideas on my own blog site that has a website link time for this informative article, you could end up guaranteed.

  12. Author
    cardaddy
    Date
    July 13th, 2011 at 8:21 pm
    Comment

    Thanks for your review! I really liked it.

  13. Author
    geonerstiem
    Date
    June 29th, 2011 at 5:35 am
    Comment

    thanks