You are looking at a beautifully laid out page of text and graphics after clicking a link or entering a website address. This is not magic! Behind the scenes is code including, among other things, body and image elements. Well-written code is not only pretty, it also allows the site to stand up and be noticed.
Chris Covier’s “What Beautiful HTML Code Looks Like” provides a clear outline of what well-written HTML code looks like and how it is used. He refers to code as poetry. After reading his article and scouring his markup sheet, I agree.
Through the web development program I recently started, I have been learning about HTML. This article successfully put all that information and more into a simplified one-page diagram. I found information that was new to me and information that made process clearer. There is a lot of good information on this diagram. Below I share my five main takeaways for making your code beautiful, functional and organized.
- Consistency: although it is not functionally necessary in HTML for all elements with content to have “/” as part of the closing tags, being consistent is good practice. An example is with the “img” tag. Working code can be written as <img src=”imageinfo”>. Including “/” in the closing was only required for “img” in XHTML . Using it with HTML, even though not required, will help your process and the look of your code to be consistent.
- Commenting code is important when there is something entered that is not obvious. These notes will prove to be a time saver when editing. Avoiding overuse of comments is equally important since the more streamlined code is, the more readable it will be. In HTML comments are coded as “/!–COMMENT–/”.
- The use of “class” and “id” attributes are important in targeting HTML code for organized CSS styling. To ensure appropriate code organization is achieve, be mindful how these attributes are used. Class attributes are reused and should be paired with elements that have similar styling needs. An id attribute should be use only once and only if the element cannot be targeted any other way.
- HTML should not include any styling or comments on styling: that is the function of CSS. Only content, required site resources and descriptions should be included in HTML.
- Indentation: of all the tips, indentation is the most important to maintain readable code. Without proper indentation, it is hard to figure out where code starts and ends. Start and end tags should be indented at the same level and each child tag should be indented appropriately.
One rule Chris identified that I had not been following is coding height and width of images within HTML img attribute. Since one of the coding rules identifies not to include styling in HTML, I had not been practicing this. However, this is an excellent tip for rendering efficiency and I will use it going forward. The image will open more quickly if it sized at the time it opens in HTML rather than opening and then resized with CSS.
There were a couple items I needed to research: the meaning and use of “includes” and “dynamic”. Glad I did; they are very cool tools.
The HTMLGoodies website provided an excellent description of “includes”. I realize there is so much more “magic” to learn after reading about this command. The example provided was the perfect explanation of why “includes” is used: “You have 500 files on your Web site. At the top of each of the files is a greeting that you’d like to change daily. You could either go into every page, every day, and change the greeting or you could have a text file that each of your 500 files include. Then you would change just that one text page and all the other pages would update. That’s the concept of the include command.” Can’t wait to use this one!
At Exsitewebware, “dynamic” content is described as content that changes regularly based on a set of criteria. Mainly used for pages whose content changes too quickly to easily republish, pages that display viewer specific content like profiles, and pages that display content conditionally like member only pages. Anything is possible with coding!
Chris’ article and attached markup sheet is a fantastic resource. I highly recommend.