The Semantics of Prototyping with HTML and CSS
The design of a web site is extremely important because it is not just the user that must navigate through all the information that you provide. From carefully plans with your structure of HTML documents, you can help search engines and other databases to make sense of the meaning of your content. When you follow proper syntax you are providing parsers, search engines, and assistive techonologies with a meaning bunch of data that they can use to provide search results and other data to users who are searching for specific things. To make this all this possible there is this things in HTML5 called semantics which defines the layout of sites and what tags repersent certain areas in the site. Under a “semantic web” a web of data that can be processed by machines and easily spit out data back to the user in a understandable form. All the other tags are non-semantic elements and they don’t have any special meaning, the hierchical relationships between them are merely illusory. The best examples of non-semantic HTML tags are the <div> and the <span> tags while they provide us with a means of organizing other information and elements but it does not give us the ability for the computer to automatically search our data.
Now that we have all these elements to play with, we can create more sites that are nicely layed out without going through so much trouble to create this. A good example of this is the <header> and<footer>. These elements are not just reserved for “website header” and ‘website footer” but you can also use them as headers and footers for any element that creates a new section of its own; this process is referred to as “sectioning content”. These elements can bring new meaning to you work and allow you to create sites that are better looking and easier to navigate because of the creative layout that you employ.
If we want to create a well-structured document outline we need to pay attention to the following rules. First, the outermost sectioning element has to always be a <body> tag. Second rule, sections should be nested. Third rule, a section has its own heading tag. Fourth, the site also needs proper headings for each section. Fifth, it’s always the first heading element that defines the heading of the given section and the following heading tags inside the same section need to be relative to this. Sixth, sections defined by the <nav>and <aside> tags don’t belong to the main outline but contain information to move around the site or info that the user might also be looking for. Lastly, each semantic section can have their own <header>and <footer> tags, to define the sub header and sub footer for that section. From these rules and guidelines we can create many meaningful layouts. Semantic HTML tags and document outlines are only a small part of web semantics the other peice of the puzzle that can give even more meaningful site layout and data with the help of accessibility protocols, and structured data. This protocol can bring our data and site to a whole new level. For us to ensure your code is future-proofed for later additions, it’s smart for us to class names and IDs to all our major elements or else prepare to target based on context or use the element type selector. CSS principles might also help with selecting our elements.