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; }
Tags: Block Display, Cascading Style Sheet, css, CSS block inline display, HTML, Inline Display, tutor web standards, Web Semantics
Web-semantics has nothing to do with the CSS display property of the elements. Web-semantics means using a particular HTML element according to its primary purpose (for example – to display ordered lists). This is why the use of tables for building layouts is considered as non-semantic – simply because the primary purpose of the table element is to display tabular data. The div element is considered more suitable for building layouts not because it is semantic, but just the opposite – because it does NOT bear any semantics. The logic is that the meaning should be carried out by the contents, not by the the layout (i.e. the div). A div element is simply a placeholder for semantic elements such as lists, paragraphs, links, etc. You can create a whole website without using any other elements but divs, and this will not make it semantic at all.
I’m no expert on Web Semantics, but I do know an empty post when I see one. What you just wrote about is this:
“Use divs for block elements. Use spans for inline ones.” Really something that your audience (people who are interested in this stuff) already know.
If you’re going to look web developers/designers in the face and tell them something they’re already aware of, you better follow it up with some creative example of using it that they’ve never thought of.