The Semantics of Prototyping with HTML and CSS
Semantics
I believe semantics deals with the structure of a web page as well as the meaning of the elements used for it. As mentioned by Anna Monus from Hongkiat.com, some of the benefits of good semantics on a web page include more searchable content, better search engine ranking, increased accessibility, and simply organization. This leads into semantic elements. Apparently, most web developers did not even realize they were dealing with semantic elements like <form>, <img>, <table>, prior to HTML5. But it made sense to pair these elements with what they stood for, of course. There are also non-semantic elements like <div> and <span> that could be used for a variety of things. Anna Monus says “Non-semantic elements don’t have any special meaning, the hierchical relationships between them are merely illusory”. Then there is text-specific semantic elements such as <strong> and <em> to enhance how a text looks and <time> and <mark> to distinguish text further. Also, we have sectioning semantic elements such as <section>, <article>, <nav>, <aside>, <body>, <main>, <header>, and <footer>. I feel that these semantic elements are the most important because it gives a web page the overall structure and layout. Matt West from the TeamTreeHouse blog says “Web standards [Semantic elements] are not only helping to improve the quality of our markup, but the quality of our web pages as a whole”. I think the key point from semantics/semantic elements is to employ consistency in all of your web pages.
Prototyping
I’ve done prototyping before, and it is quite a useful tool in getting to your final(ish) product. Low fidelity such as the first sketch we did in Assignment 11 were useful in getting the content on a page. Using the screenshot that the professor provided might have sufficed but it brings a different presence when you are using something you drew yourself. It is like you are taking steps into your final(ish) product. The next sketch was the semantic element layout of what our web page would look like. Not all web pages will be the same as the example provided from the Hongkiat article since you will likely use different tags, elements, and sections in different areas of the page. I found my sketch handy when writing out my code for the final prototype. I laid out my sectioning semantic elements and tags on the sketch, and I simply followed it. Some areas of the sketch, I went into a different path because either A.) I felt that I could use another element instead or B.) I wasn’t entirely sure how to use the element most effectively. Either way, I was able to maintain a general structure to the page and able to get my last prototype to look like the YouTube page.
Final Comments
Learning about the semantics and semantic elements gave us an understanding of structure and layout of a web page. It emphasizes we should strive for consistency in our pages. Prototyping, from low-fidelity to high-fidelity, shows us we need to start from the basics such as sketches to more advanced like writing code within codepen. In doing so, we get the extra value of understanding what we are working with and how to structure it accordingly.