Drop Down Menu

Tuesday, November 19, 2013

HTML 5 Semantics = cleaner code!

In the past if you wanted to style generic tags like the paragraph tag you could use p for the selector and add properties that would affect every paragraph tag on the page or in the document.  Or you could have just created class selectors to apply to different paragraph tags.  All viable options but a  lot of extra coding is required and great organization is needed to apply the right class to where you needed it used.

Now with semantics you can format every paragraph in a specific section by using pseudo selectors.   If you need a review on how to use HTML 5 semantics please review previous posts explaining

Using our example of a paragraph tag let’s look at how we can now format text according to semantic element:

New Way
Old Way
CSS EXAMPLE:
header p {
font-family: helvetica, arial, sans-serif;
font-size; 2em;
color:#000000;
}

section p {
font-family: helvetica, arial, sans-serif;
font-size; 1em;
color:#336699;
}

HTML EXAMPLE:
<header>
<p> My company rocks content. </p>
</header>
<section>
<p> My company rocks content. </p>
</section>


CSS EXAMPLE:
Applies to every paragraph on the page
p {
font-family: helvetica, arial, sans-serif;
font-size; 1em;
color:#000000;
}

OR for formatting paragraphs differently

.class {
font-family: helvetica, arial, sans-serif;
font-size; 2em;
color:#000000;
}

.class2 {
font-family: helvetica, arial, sans-serif;
font-size; 1em;
color:#336699;
}


HTML CLASS EXAMPLE:
<p class=”class”> content for first class goes here </p>
<p class=”class2”> content for second class goes here </p>



Of course the less code I have to write the better! You can use this method for other semantic tags and with tags other than paragraph. More tips coming soon.

No comments:

Post a Comment