![]() This is a good time to bring up naming conventions, as we have just talked about that unordered list with an id of “bigBarNavigation.” The “Navigation” part makes sense, because it’s describing the content that the list contains, but “big” and “Bar” describe the design not the content. Divitis: what it is, and how to cure it.There really is no need whatsoever for the to be wrapped in a div anything you can do with that div you can do with the. Both divs and unordered lists are block-level elements. In our example, we have a div (“topNav”) that wraps an unordered list (“bigBarNavigation”). This leads to a proliferation of the div element and to their being used far too liberally in unnecessary places. Sometime during the learning stages of Web design, people learn how to wrap elements in a div so that they can target them with CSS and apply styling. I don’t know who first coined it, but I love the term “divitis,” which refers to the overuse of divs in HTML markup. It’s like crossing the streams in Ghostbusters. ![]() Blocks shouldn’t go inside inline elements. An anchor link is an “inline” element, and header tags are “block” elements. Most browsers will handle it fine, but technically it’s a no-no. However, the anchor link,, wraps the header tags. And as per the norm, the title is a link to the home page. The title of our site, “My Cat Site,” is properly inside tags, which makes perfect sense. There is no JavaScript in our head section, but the same goes for that. This may have happened as a “quick fix” at some point, which is understandable and happens to all of us, but let’s get that moved to a more appropriate place in an external file. Keeping your CSS files separate means that future pages can link to them and use the same code, so changing the design on multiple pages becomes easy. This is a grievous foul because not only does it muddy our markup but it can only apply to this single HTML page. We have some CSS that has snuck into our section. Nicely indented markup goes a long way in beautifying your code and making it easy to read and jump around in. But I recommend being consistent with whatever you choose. Indentation rules are far from set in stone feel free to invent your own system. Then move back in a tab when you are closing that element. Standard procedure is to indent one tab (or a few spaces) when you are starting a new element that is a child element of the tag above it. Indentation has no bearing on how the page is rendered, but it has a huge effect on the readability of the code. To avoid any possible misinterpretation of that, we’ll convert it to & instead.Īll right, we are about three lines in and I’m already annoyed by the lack of indentation. While we’re talking about characters, let’s go ahead and make sure any funny characters we are using are properly encoded. Let’s go ahead and move it up so that the browser knows what character set it’s dealing with before it starts reading any content at all. We’re using UTF-8 here, which is swell, but it’s listed after our. In our section, the very first thing should be the declaration of our character set. W3C: Recommended DTDs to use in your Web document.Our code doesn’t use any tables for layout anyway (nice!), so there really is no need for a transitional DOCTYPE. No need for a discussion about whether to use HTML 4.01 or XHTML 1.0: both of them offer a strict version that will keep us nice and honest as we write our code. If we are going to do this, let’s just do it right. ESLint: The Next-Generation JavaScript Linter.7 Principles Of Clean And Optimized CSS Code.If you are interested, take a peek at the bad code and the good code before we start so you can see the big picture. ![]() Let’s take a look at some poorly written HTML, discuss its problems, and then whip it into shape! Bear in mind, we are not passing any judgment on the content or design of this page, only the markup that builds it. A house is only as strong as its foundation, right? The advantages of clean, semantic HTML are many, yet so many websites suffer from poorly written markup. When I teach people about CSS, I always begin by telling them that good CSS can only exist with equally good HTML markup. A house is only as strong as its foundation, right? The advantages of clean, semantic HTML are many, yet so many websites suffer from poorly written markup.īeautiful and clean HTML is the foundation of a beautiful website. Beautiful HTML is the foundation of a beautiful website.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |