You might have heard the work semantics tossed around on this blog or on the internet elsewhere and wondered “what is that?”. Well, I’m going to give you the quick and skinny of what “semantic markup’ is, and why we do it now! Wikipedia has a very extensive page on this whole subject, but in reality, for our purposes, explaining this concept is very simple:
1. Keep your markup, style, and scripts separate of each other.
2. Close tags in the proper order.
What do you think? Easy enough? I didn’t feel like boring you with all the other details that Wiki has, but if you want to get some good reading in, go check out that article!
So, let’s talk about these and what they mean to us, the web programmer and/or designer.
#1. Keep your markup, styles, and scripts separate:
This one is really self explanatory, we want to keep the styles out of our markup, etc. How many times have you looked at the source code of a website and seen things like this all over the place:
<body background="images/background1.jpg" width="900" height="1000" ....>
Now, instead of placing all the style rules in the HTML tags, we put them in a .css file instead. This really helps speed up load time, and it makes the markup much, much, much, much easier on the eyes. Lastly, when you actually have to edit your styles, you don’t have to go change one small style rule for each and every element! So instead, consider this:
body{
background: url('images/background1.jpg') no-repeat;
width:900px;
height:1000px;
}
If that isn’t simple, I don’t know what is!!
Importing CSS Files
Now, how do you load the .css file we have our styles in into our .html file? That’s simple! In between the <head></head> tags we would put something like:
<style type="text/css">
@import url('styles.css');
</style>
Now, this will load our external style sheet and apply the rules to our markup accordingly!!
What more proof about how awesome loading an external style sheet is? How much of a pain is it having to style every element the same in your markup, like the <p> tag? You have to go through and to every <p> tag add the following styles to it so they all look uniform:
<p font-size="12px" color="#ff0000" ...>
This is a HUGE pain! If you have a large page, you know how much of a hassle having to go through and put style rules in the html tag can be, even if it is only one or 2!! Yikes!!
So, consider the CSS alternative that will style ALL<p> elements at once:
p{
font-size:12px;
color:#ff0000;
}
Importing Script Files
Next we need to talk about importing script files in. We will keep it simple and just talk about javascript files for now. The tags to import script files also appear in between the <head></head> area of your markup. For instance:
<html>
<head>
<title>Import Javascript</title>
<script type="text/javascript" src="javadetect.js"></script>
<script type="text/javascript" src="functions.js"></script>
<script type="text/javascript" src="motions.js"></script>
</head>
</html>
<p>Simple enough, huh? We have an opening <code><script>#2. Close tags in the proper order
Let’s face it, writing the HTML for an huge page can be a daunting task, especially when it comes time to find a small little typo that was made. Sifting through all the markup can be a pain in the butt, not to mention hard on the eyes if other people want to look at your code to see how/what you did. So ordering your elements correctly helps the world!!
Here are two examples. The first one is of bad, unordered markup. The second is semantic markup, where the tags are opened and closed correctly:
<html>
<head>
<title>Bad Markup</title>
</head>
<body>
<h3><font><p>Hello there, I'm just filler text</h3></font></p>
</body>
</html>
Whats wrong here? The elements are closed out of order! Granted, this will display correctly in a browser, but it’s better to close them the right way:
<html>
<head>
<title>Bad Markup</title>
</head>
<body>
<h3><font><p>Hello there, I'm just filler text</p></font></h3>
</body>
</html>
All said and done, closing your tags in the proper order really benefits viewers of your code and other people that might be working on a project with you.
So, what did we learn today? Two very important concepts of web design! Separate your markup, styles, and scripts, and properly close out tags in your markup!
[...] that it’s a good thing to have your markup, styles, and scripts separate, it’s called semantics! For this tutorial I have not followed that rule, instead, I am just trying to keep it simple for [...]
Спасибо наконец то нашла то что хотела прочитать тут. Кстати у меня есть рисунки на эту тему. Куда можно скинуть? Ещё раз спасибо огромнейшее !
Literal translation:
Thanks at last I have found what I wished to read through here. By the way I have figures on this theme. Where it is possible to throw off? Still time of thanks the hugest!:)
Obviously the translator engine I used isn’t the best. It would be much easier if I spoke Russian! LOL
Anyways, I’m glad I was able to help you out. I actually made this theme from scratch, so it’s not available. I guess I never considered making it publicly available! Maybe that will be my next project! Stay in touch!
Hello, I found this blog post while searching for help with JavaScript. I have recently changed browsers from Opera to Firefox 3.2. After the change I seem to have a issue with loading JavaScript. Everytime I go on a website that needs Javascript, my browser freezes and I get a “runtime error javascript.JSException: Unknown name”. I can’t seem to find out how to fix the problem. Any help is greatly appreciated! Thanks
Cool but I come across this blog looking for small other things. Probably that this page has visibility for a keyword that I’m sure doesn’t seem to be appropriate to the subject you are writing about here