Overview
This week we will learn about semantic tags in HTML. These are tags which help define our content more appropriately and can be helpful for usability/accessibility. We will also cover validating our HTML and how to make our web pages live so that other people can visit them.
Project Proposal
The first part of the final project (Project Proposal) is due on September 30th at midnight. You will need to submit 3 wireframes, 1 style tile, and 1 needs assessment for the website you plan to build for your final project. If you aren’t sure about your topic or the quality of your proposal, please reach out to me.
Previous Participation Questions/Responses These are the participation questions from last week:
https://forms.gle/4DQPbvaF4r6hP1y77
This link has the responses to the fun question from last week. Feel free to look over the responses from myself and your peers. https://docs.google.com/spreadsheets/d/1QLoQzbO-
Er7ARIECl0aPvY1lKUyZTdYeuwsn4g0XEAk/edit?usp=sharing
More HTML Fun (Lecture/Class Activity)
HTML Review
Last week, we learned about HTML and discussed the various components which make up an HTML element. Below is an example that was included in last week’s lecture notes. There are 4 total parts to an HTML element:
<p class=“para”>This is a paragraph.</p>
<p> and </p> are the opening and closing tags.
class is an attribute.
“para” is the value provided for the attribute.
“This is a paragraph.” is the content between the tags.
Tags, attributes, values, and content can all be used to build an HTML element. At the very least, you will need to utilize tags/content to get items displaying on your page.
Feel free to follow along with me as I do a brief demonstration of the tags again to recap some of what was covered last week. Afterward, I will introduce new HTML tags (semantic tags).
Semantic Tags in HTML
For web pages, the browser interprets the tags used in the .html file and displays them as it comes across them. We can do things like create headings, paragraphs, images, etc. using specific tags intended for those purposes. If we choose to use tags for purposes they weren’t intended for, it could have consequences for users. Of course, we can use things like CSS/JS to cover up poor HTML structure but that only works for entirely visual users.
One example of improper tag usage is when a developer uses table-related tags to create a layout for a page. Div, section, main, aside, and other semantic tags are better suited for the purposes of creating a layout. Screen readers most likely will not read the content in the order you intended if you use a table for layouts.
If we want our page to be as accessible/usable for as many users as possible, it is important to use semantic markup correctly. Any tags we use should help define the document structure in a clear manner and separate content from styles. This will allow users that utilize tools like screen readers to access our content and create a better experience overall.
A lot of web developers tend to use div tags to markup their content as they are useful as containers. However, divs aren’t very useful for non-visual users as they don’t offer any information as to the nature of the content inside of them. It can be difficult to build a complete page without using divs, but you should do your best to use semantic markup when possible.
Examples of common semantic tags:
| Tag Names | Purpose |
| Header | Represents introductory content such as navigation menus |
| Nav | Contains navigation-based links in major blocks |
| Aside | Usually used for content aside from the main content such as sidebars |
| Main | Contains the main content for a document |
| Article | Independent content such as forum or blog posts |
| Section | This identifies sections in a document and is sometimes used in article tags |
| Footer | Defines a footer for a document or section |
Additional Reading
- https://html.com/semantic-markup/
- https://www.lifewire.com/why-use-semantic-html-3468271
- https://internetingishard.com/html-and-css/semantic-html/
HTML Validation
For our pages to present themselves correctly and behave in expected ways, it is important to validate our documents. A document’s code is considered valid when the tags are nested correctly, and everything is placed according to W3C specifications. An example would be a <ul> tag containing only <li> elements inside of it. One rule that trips up students a lot is that <ul> cannot be a direct child of another <ul> (same for <ol>). The sample code below demonstrates good and bad structures for lists.
| Good List Structure | Bad List Structure |
| <ul><li>Item 1</li><li>Item 2<ul><li>Sub Item 1</li></ul></li><li>Item 3</li></ul> | <ul><li>Item 1</li><li>Item 2</li><ul><li>Sub Item 1</li> </ul><li>Item 3</li></ul> |
In the example above, the left side has the 2nd <ul> tag nested inside of the 2nd <li> tag. The </li> tag is closed after the 2nd <ul> set is closed. In the bad list portion, the 2nd <ul> is a direct child of the 1st <ul> and therefore not valid. This is just a rule that is a standard in HTML and there are many others like it.
I don’t expect you all to memorize all rules; you can use a validator instead. It will tell you what lines of code are wrong, so you can fix them and improve your document’s markup. To check your code, copy all of it and paste it directly into the validator. You can also upload files or provide a link but copy/pasting code is quicker.
Use the website below to validate your code in the assignment mentioned below. I would recommend bookmarking it in your favorite browser for the semester. Chrome is my browser of choice, but Edge and Firefox are pretty good as well. A green bar means your document validates perfectly.
https://validator.w3.org/#validate_by_input
Publishing Our Web Pages
To publish our web pages, we need to use FTP software to place our files on the UAlbany server. Each of you has space reserved for hosting files and we will use that space for our coursework this semester.
Follow along with me as I demonstrate how to upload files using FileZilla. If you get lost or I’m going too fast, feel free to refer to the “Viewing our Web Pages.docx” document that has been provided with today’s lecture notes. If you ever forget how to do the file upload, this document is also available on Blackboard through Course Materials à Additional Resources.
Validation Exercise (CW)
Download the validation-exercise.zip folder from Blackboard under today’s lecture notes or the assignments folder. After you have downloaded the folder, extract the files to somewhere else on your computer where you’ll be able to find them.
Your task is to fix the HTML in the document which contains numerous errors. To see what your page should look like after you have fixed it, there is an image included in the zip folder.
The content on the page goes beyond the height of the screen so the image provided will look small as I took a scrolling screenshot of it. However, you can zoom in on the image and everything should be clear to see. If you experience issues with image visibility, please contact me.
No text content inside of tags should be added/removed from the page, but you will need to add, delete, alter, or move around tags.
To validate your page, visit the following link and enter your code: https://validator.w3.org/#validate_by_input
Once your page is validated, place it on your UAlbany server area as explained earlier in class today. To earn credit for this assignment, you will need to submit a link to a validated page to Blackboard. You will know the page is validated when you use the validator link and it displays a green bar with the text: Document checking completed. No errors or warnings to show.
Tips
Reviews
There are no reviews yet.