I think that most newbies make when they start coding web sites is that the different tags have some super-duper special powers. Actually, I don’t think that. I do think that newbies think that there is at least some magic going on behind the scenes.
The biggest piece of advise I can give a person is:
- Find out what a tag does!
- How is it similar to other tags?
- How is it different?
What is the difference between a newbie and a Master web developer? Newbies normally can tell you what something does but they don’t know why it does what it does. How things work (ie inner working knowledge) will really help you excel.
1.) If I were to ask you “What is the default position of block level element” would you be able to tell me? I bet most people can’t respond to that without looking that up. The answer to the question was “STATIC”.
2.) Two of the most confusing styling style properties are:
- Whether an “element is block or inline” by default
- What the default positioning of an element is. (We just found out this is STATIC)
Not knowing these things will limit your designs and force you to use hacks.
If you don’t know what either of those two items are. Don’t worry.
Definition of Block level elements
To sum it up best. Block level elements are containers.
They can contain other block level elements as well as inline elements. They start new lines of text when you use them. A block-level element is an element that creates large blocks of content like paragraphs or page divisions.
Block level elements can have width, height, Max-width,max-height, min-width and min-height applied to them.
Definition of an inline element
To sum it up best inline elements become part of the HTML flow of the containing Block/inline level element. Inline elements can only contain other inline elements
Want to get really confused?
Here’s the real kicker. Remember when I went on that little bit of the rant at the top of the page about some things that seem to be magical? Well there was a reason for it. LOL. Even though the lists I linked to say an element is inline there is NOTHING stopping you from making it a block level element. While I don’t recommend changing elements to what ever you feel like, I do think there are a couple instances that you might need to change between a block and inline Element.
Horizontal List Menus – By default most lists are displayed vertically. If you want to have the horizontal you have no other option but to change them from block to inline.
Headers inside text. Say you want a header to remain in the text flow so that the rest of the text just seems to flow as if it was no break you’d need to make it inline.
There is actually one more option to take about when talking about inline or block level elements. The third thing an element can be is “hidden”. If something is classified as hidden then it will not be displayed on the page.
I think one of the best articles of all time on positioning can be found at CSS-TRICKS. I’m not even going to bother re-hashing a perfect post.
Hope you learned a thing or two.