Why semantic code

In addition to writing semantic HTML, there are a handful of rich, structured data standards that make it easier for machines to understand the content hierarchy and display relevant information to users. Things like microdata, microformats, and RDFa can be used individually or in combination in order to take accessibility to the next level.

Microdata is the recommended format from Google and other search engines, as well as part of the HTML5 specification, and it uses information from both microformats and RDFa. It builds upon the semantic HTML foundations that you have laid, making it even easier for tools and devices to make sense of your content for people. Ultimately, following semantic web markup practices and using carefully structured and validated code is your best strategy for ensuring that your web content will be useful and visible into the future.

Communication is the central task of web designers. Most of the time we think of communication in terms of the words we use and the visuals we create, but it also extends to the code we write.

Semantics are about meaning, and writing semantic code means building more meaningful webpages. Not ready to commit to a conversation just yet? No problem. Get an automated analysis of your site with our Digital Marketing Scorecard. How is your digital marketing performing? Free in your inbox tomorrow. In order to build for maximum website usability and ROI, there are a variety of details that need extra-special attention.

Download the full ebook to learn more. We will be in touch very shortly to discuss ideas and how to make it happen. What is Semantic Markup in Web Design?

A comparison of illustrated HTML samples in web design. Why Should I Care? Used in conjunction with pre , code will then show whole blocks of code, with the relevant formatting of whitespace and line breaks:. While the viewport of your browser will typically create wordbreaks and linebreaks on its own, in some instances it is best to denote exactly where you would like these, using the br element for linebreaks, and the wbr element for wordbreaks..

Common examples include mailing addresses, as well as a URL you may want to break down into its constituent words, in case the word needs to wrap onto two lines:. This blog post has just scratched the surface, but there are many more HTML elements specifically for writing semantic code.

We will survey more advanced examples of semantic code in a future post. Angelo has been involved in the creative IT world for over 20 years. He built his first website back in using Dreamweaver, Flash and Photoshop. Angelo completed formal training with the CIW Certified Internet Webmasters program in Sydney Australia, learning the core fundamentals of computer networking and how it relates to the infrastructure of the world wide web.

Comments are moderated. Your email is kept private. Seeking a reliable payment gateway provider? We suggest authorize. Level 12, Los Angeles CA, Contact Us! What is a Semantic Code? Document Structure or Page Layout For the sake of high-level page or document structuring, use the proper tags of nav, section, article, main, header, footer, and aside. Common examples of semantic code Abbreviations The abbreviation element should be used whenever an abbreviation or acronym is utilized on the page.

Angelo Frisina. Author Bio Angelo has been involved in the creative IT world for over 20 years. This article was posted in Web Development. One Comment. Thanks for sharing the knowledge and keep up the good work. Findings like these helped the W3C identify and target new semantic tags to include in HTML5 such as: nav , header , footer , article , and aside. We can group the most common and important semantic elements into four categories:. In the past, the div element was the main way sections of a website were identified and grouped.

However, with the release of HTML5, we have several new tags to work with that provide semantic meaning in addition to the grouping attributes offered by the div tag:. Review our Document Tutorial to learn more about using these semantic tags that add structure to a web page.

By using em tags, visitors using screen readers or other computers accessing the content would understand that the tags were applied to add emphasis to the tagged content. The em element is just one example of how HTML tags add semantic meaning to textual content. Other examples include:. Our Fonts and Web Typography Tutorial provides a great deal more detail surrounding the proper use of these tags to assign semantic meaning to textual content.

HTML5 also includes three tags that identify the type of media served up between the tags. These tags serve a dual purpose. First, they signal to the browser the need to queue up a specific technical resource such as a video playback engine.

Second, they assign semantic meaning to the content. In addition, our article on the use of images on the web provides additional information on when to use the picture element and when to stick with the img element.

Several HTML elements are used to signal a correlation between multiple elements. For example, the use of an ordered list ol tells the browser that the items on the list are related to eachother and need to appear in a specific order.

Other elements that are used to signal correlation between multiple elements include:. HTML has grown increasingly complex over the last several years, and it can be tempting to keep using div elements with class and id attributes, but the accessibility and interoperability promise of semantic HTML5 tags is reason enough to embrace these new semantic elements.

As Internet access becomes more widespread, smart devices proliferate, and the web further integrates into the fabric of modern society, the need for markup to be semantically accurate becomes increasingly evident.

No longer is web page content isolated to desktop computers and accessed with just a few web browsers. Today, the semantic web is growing up all around us.