If your HTML is strictly a semantic layout of your content, then you can always change your presentation with CSS and JavaScript. Semantic HTML is intentionally simple. At a glance, one needs only a basic knowledge of HTML elements to understand your content. This keeps pages light, machine-friendly, and easy to maintain.
By being machine-friendly we improve accessibility and SEO. First, universal access devices such as blind readers allow your content to be used by impaired individuals. Second, Google's spiders are able to better understand the intent of your site through semantic markup.
The process is as simple as separating style from substance. The HTML elements tell you their intended use. For examples, tables should only be used to display tabular data, and never to lay out a site. Let's take a look at the EtherCycle process page:
Because the process page is a list of steps with explanations, we've defined it as a definition list with each step being a term and the explanation being the definition. Take a peek at the code–
All the styling (including the images) are done in CSS3 using selectors–
#process {
counter-reset: toc 0;
}
#process dt:before {
content: counter(toc, decimal) ". ";
counter-increment: toc;
}
#process dd {
margin: 0 0 3em;
padding: 0 1em 1em;
position: relative;
}
#process dd:nth-of-type(1):after {
content: url("/img/processLearn.png");
left: 42em;
position: absolute;
top: -2em;
}
While semantic code has always been possible and encouraged, only now with the flexiblity of CSS3 are we able to fully realize semantic sites without sacrificing presentation.
By being machine-friendly we improve accessibility and SEO. First, universal access devices such as blind readers allow your content to be used by impaired individuals. Second, Google's spiders are able to better understand the intent of your site through semantic markup.
The process is as simple as separating style from substance. The HTML elements tell you their intended use. For examples, tables should only be used to display tabular data, and never to lay out a site. Let's take a look at the EtherCycle process page:
Because the process page is a list of steps with explanations, we've defined it as a definition list with each step being a term and the explanation being the definition. Take a peek at the code–
- Learn
It is fundamental to a project's success that we understand your business. We do this by auditing your content, interviewing key stakeholders & customers, reviewing analytics data, and listening to you.
All the styling (including the images) are done in CSS3 using selectors–
#process {
counter-reset: toc 0;
}
#process dt:before {
content: counter(toc, decimal) ". ";
counter-increment: toc;
}
#process dd {
margin: 0 0 3em;
padding: 0 1em 1em;
position: relative;
}
#process dd:nth-of-type(1):after {
content: url("/img/processLearn.png");
left: 42em;
position: absolute;
top: -2em;
}
While semantic code has always been possible and encouraged, only now with the flexiblity of CSS3 are we able to fully realize semantic sites without sacrificing presentation.
