Coding Clean and Semantic Templates. If you are the guy who uses <div> tag for everything, this post is for you. It focuses on how you can write clean HTML code by using semantic markups and minimize the use of <div> tag. Have you ever edited someone’s templates, don’t those messy tags drive you crazy? Not only writing clean templates can benefit yourself, but your team as well. It will save you time when you have to debug and edit (particularly the large projects). 1.
I’ve seen a lot of people wrap a <div> tag around the <form> or <ul> menu list. Example 1: The example below shows how you can drop the <div> tag and declare the styling to the form selector. Example 2: Sometimes we wrap the content with an extra <div> tag strictly for spacing purposes. 2. You should always use semantic markups to code HTML documents (ie.
Example: The image below compares the rendering differences between <div> markups and semantic markups with no css supported. 3. 4. 5. When coding for platform templates (ie. Conclusion. Web Developer's Handbook | CSS, Web Development, Color Tools, SEO, Usability etc. Vitaly Friedman's The Web Developer's Handbook creativity | css galleries & showcases | color tools | color schemes, palettes | color patterns | fashion: colors selection | color theory | royalty free photos | css daily reading | web design daily reading | css layouts | css navigation menus | css techniques | css: software & Firefox Extensions | css-web-tools & services | html-web-tools & services | accessibility checkers | miscellaneous tools | ajax | javascript | DOM | fonts | typography | RSS | CMS | blogging | specifications | usability & accessibility | add a link (free) | seo tools | seo references | howtogetthingsdone | freelancers resources | web2.0 | 2read Advertise here!
Creativity css: selected showcases css galleries & showcases color tools color schemes, palettes color patterns fashion: colors selection color theory royalty free photos specifications usability & accessibility add a link (free) seo tools seo references howtogetthingsdone freelancers web 2.0 2read: this week. Revolução Etc. Xhtml/CSS map/mapa. (see English version below) Bastantes personas me han sugerido que realice algún tipo de tutorial de CSS y programación web. De estas sugerencias he decidido ir publicando ejemplos de casos prácticos de desarrollo web, realizados con css y xhtml estricto, accesible, semántico, que funcione en la mayor cantidad de navegadores posibles sin hacks y, por supuesto, que valide. Mapa con areas que se iluminan En gran cantidad de webs es necesaria la selección geográfica.
Al realizar estos mapas con xhtml semántico y no en Flash, aumentamos en gran medida la accesibilidad y Google (y otros buscadores) podrá recorrer todo el website sin problema. El mapa de ejemplo ha sido validado y probado su correcto funcionamiento en los siguientes navegadores: Windows: IE 6, IE 7, IE 8 beta, Firefox 2, Firefox 3 beta, Opera 9, Safari 3, Flock y Links 0.98Linux (Kubuntu): Konqueror 3.5.9 Descargar este ejemplo English Several people asked me for tutorials on CSS and web coding.
Map with highlight on hover. Smashing Magazine.