Best Web Buzz

When working with an HTML document that will be posted on the web, it is important to bring your attention on how you lay your HTML tags and how it its being used. For example, in your website, you post your web site name which is WEB STANDARD WEBSITE. So we have to use <H1> WEB STANDARD WEBSITE </H1>.

The old traditional way of marking up, we tend to use TABLE in laying out the structure of our webpage. Now they introduce DIV. Div is a markup for grouping and sorting website components that groups each website portion and function. Div is a block-level whereas a span is an inline element which can be seen and present in Adobe Dreamweaver.

Here is how it looks like in Dreamweaver:

Block and Inline element Display on Dreamweaver

Visually it looks like a whole block that group content.

So this is where CSS comes in to rescue, when you want your HTML tag to have a block element. #id { display : block; }

Last week our company had a skill test exam for front-end web developer vacancy. I sneak peek a couple designs and I found out some bad habits in their codes.

Here are the coding habits you would like to avoid.

Use the right tag for appropriate function.

vertical category list

Here is a bad vertical category list source code.
Example 1

Comment: overkill div tags

<div> Shop by Categories</div>

<div class=”business”>Business and Management</div>

<div class=”business”>Business and Management</div>

<div class=”business”>Business and Management</div>

<div class=”business”>Business and Management</div>

Example 2

Comment: dont use heading tags on your category list

<div class=”business_management”>

<a href=”#”><h2>Business and Management</h2></a>

</div>

<div class=”business_management”>

<a href=”#”><h2>Business and Management</h2></a>

</div>

<div class=”business_management”>

<a href=”#”><h2>Business and Management</h2></a>

</div>

Example 3

Comment: update your web development skills

<div class=”shopbycategories”><font class=”shopbycategoriesText”>Shop by Categories </font></div>

<div class=”greenleftBG”><font class=”businessmgtTEXT”>Business and Management<br>

Business and Management<br>

Business and Management<br>

Business and Management<br>

Business and Management<br>

Business and Management<br>

Business and Management<br>

</font><br>

Here is the correct way presenting your source code for vertical category list

Comment: your id=”category” will now take care of the styling

<div id=”category”>

<h2> Shop by Categories </h2>

<ul>

<li><a href=”#”> Business and Management</a></li>

<li><a href=”#”> Business and Management</a></li>

<li><a href=”#”> Business and Management</a></li>

</ul>

</div>

Remember you are coding for a vertical category “list” so you might as well use list tag and make use of li tags.

Front-end web developers always want to find ways to optimize your HTML and CSS code. I saw a post on Cssglobe.com by Alen Grakalic about CSS Text Gradient and it opened me the idea about CSS Text Gradient. So maybe I can have this look gradient without using a transparent gradient PNG file. Bestwebbuzz.com presents text gradient without transparent gradient PNG file. This is how it works.

css gradient

CSS
h2 {
 font-size:250%;
 color:#0079b6;
 font-weight:normal;
 letter-spacing:-.05em;
 margin:.6em 0;
 position:relative; 
 font-weight:bold;
}
h2 span{
 position:absolute;
 display:block;
 top:0;
 left:0;
 height:60%;
 width:100%;
 background-color:#FFFFFF;
 filter: alpha(opacity=65); /*     <—-this part do the magic——*/
  -moz-opacity: 0.65;/*       <—–this part do the magic———*/
  opacity: 0.65;/*          <—-this part do the magic———-*/
}

HTML
<h2>My Cool Title<span></span></h2>
<h3>My Cool Title<span></span></h3>

You can download the demo file here demo

I would like to thank Alen of cssglobe and Virgil of jampmark.com for the idea and concept.

Why stick to Web Standards?

Certain web developers and web designers have a resistance towards using web standards. Common arguments are It’s too difficult, It works anyway and The tools I use create invalid code.

It’s easy to react emotionally and build up a resistance towards learning something new and abandoning techniques you know and feel comfortable with. However, if you look at the situation logically you will see that there are many benefits to learning and using web standards. A few examples:

• Simpler development and maintenance: Using more semantic and structured HTML makes it easier and quicker to understand code created by somebody else.
• Compatibility with future web browsers: When you use defined standards and valid code you future-proof your documents by reducing the risk of future web browsers not being able to understand the code you have used.
• Faster download and rendering of web pages: Less HTML results in smaller file sizes and quicker downloads. Modern web browsers render pages faster when they are in their standards mode than when they are in their backwards compatible mode.
• Better accessibility: Semantic HTML, where structure is separated from presentation, makes it easier for screen readers and alternative browsing devices to interpret the content.
• Better search engine rankings: The separation of content and presentation makes the content represent a larger part of the total file size. Combined with semantic markup this will improve search engine rankings.
• Simpler adaptation: A semantically marked up document can be easily adapted to print and alternative browsing devices, like handheld computers and cellular phones, just by linking to a different CSS file. You can also make site-wide changes to presentation by editing a single file.

Web standards can save time and money for website creators, and provide a better experience to the website’s visitors. Besides, web standards is the future. If you’re not using web standards already, now is the time to start, or you will risk being left behind.