"Analysis of the Application of HTML/CSS in Modern Web Design"
For this project, I am analyzing the webpage template “Band Template” available at w3schools.com. This template is a very
nice example template detailing a fictitious band. I like the webpage template and find it very appealing and organized.
The layout is clean and simple making it easy to use and navigate. The Home page is visually appealing and interesting and
includes a short slide show that is looped with a single band-oriented picture each labeled with location Los Angeles,
New York and Chicago. The webpage template layout is clean and responsive and not overly complex. It includes a tabular
navigation bar at the top for Home, Band, Tour, Contact and More for effectively directing the website visitor to those
specific sections of the webpage. Each section of the website template includes default pictures, paragraphs, forms and
labels to illustrate each sections focus (W3Schools.com, n.d.).
Viewing the template in a browser proved it to be responsive when scrolling or navigating through the tabs. The More tab
included 3 additional subtabs that were dead and obviously used as placeholder examples for the template. After inspecting
the template code, it appears to be well organized and complete. The head element includes sufficient data defining the title,
character sets, stylesheets and metadata. The head element is in the correct location between the tag and the
The webpage template added CSS using external and inline CSS to achieve the desired style of the website template. In the head element, the template links to a w3schools CSS stylesheet using the link tag in the head element. In addition, links to Google and Cloudflare stylesheets are used for additional fonts. Inline CSS is used throughout using the “style” attribute of the relevant element. For example, under the Band section, the style=”width: 60%” is used to reduce the size of the default band member image so the 3 default band images fit nicely inline on the webpage (W3Schools.com, n.d.).
The webpage template tends to over-nest the “div” element at times breaking the rule of best practice of keeping the HTML structure simple. Over nesting may negatively impact a site’s performance and accessibility which may occur if using this template. It is always best practice to avoid over nesting making the HTML code harder to read and maintain. Except for the footer tag, very few HTML5 tags are used within the website template. The lack of Symantec HTML5 tags impacts the ability for users and search engines to navigate and understand the web content (Hernandez, 2024).
I found the webpage template appealing and effective as a base template. Updating the code using HTML5 tags will improve on the website accessibility. Using the WAVE web accessibility evaluation tool, it identified multiple issues with alternative text, form labels, link data, contract, structural, and feature errors. And WAVE identified that it lacked any ARIA (Accessibly Rich Internet Applications) elements limiting the template’s ability to support assistive technologies. If the template included Symantec HTML5 tags, the lack of ARIA would be acceptable since it provides the accessibility feature for users that require assistive technology. Using this template will require some editing to improve on accessibility, but overall, the layout and functionality is very nice (WAVE Web Accessibility Evaluation Tools, n.d.).
Works Cited
Use link below to access the References Page, a PDF version of the assignment, and the Quiz Page.