Agenda

• More HTML
  • Semantic markup
  • Validating our documents
  • HTML Exercise 2
  • Validation Exercise
  • HTML Research Initial Post & Response
• Next Week

Hypertext Markup Language

Semantic Markup

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 werent 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. 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.

Additional Reading

• https://html.com/semantic-markup/
• https://www.lifewire.com/why-use-semantic-html-3468271
• https://internetingishard.com/html-and-css/semantic-html/

Validating our documents

For our pages to present themselves correctly and behave in expected ways, it is important to validate our documents. A documents 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>. The sample code below demonstrates good and bad structures for lists.

In the example above, the left side has the 2^nd <ul> tag nested inside of the 2^nd <li> tag. The </li> tag is closed after the 2^nd <ul> set is closed. In the bad list portion, the 2^nd <ul> is a direct child of the 1^st <ul> and therefore not valid. This is just a rule that is a standard in HTML and there are many others like it. Look at the example below for an explanation of list nesting:

https://iinf362.000webhostapp.com/examples/nesting-example.html

I dont expect you all to memorize all rules which is why you place your content in a validator. It will tell you what lines of code are wrong so you can fix them and improve your documents 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 assignments mentioned below. I would recommend bookmarking it in your favorite browser (ideally Chrome for its web developer tools) for the semester.

https://validator.w3.org/#validate_by_input

Before completing the assignments for this week, please read the Creating and Viewing our Web Pages.docx file on Blackboard. You will not be able to submit anything for the assignment without completing that portion first.

HTML Exercise 2

Download the html-exercise-2.zip folder from Blackboard under todays lecture notes or the assignments folder. Using the html files, create two web pages based on the images provided in parts 1 and 2. Your pages should validate entirely (green bar on the validator website) and contain the content exactly as I have it. This means all text should be bolded/italicized or linked as depicted on the pages. You can also use your own HTML file if you prefer to do it that way. Just make sure it validates by the time you finish.

The list below contains the tags that should be used for this assignment:

• title
• p
• h1-h3
• ul
• li
• ol
• hr
• em
• strong
• table
• tr
• td
• th
• form
• input/button
• textarea
• br
• html
• body
• a

To receive credit, you should submit TWO links to your pages. You can name the files whatever youd like but part1.html and part2.html are straightforward and easy for me to grade. The most important thing is that you submit two live links to Blackboard and that both pages validate.

Validation Exercise

Download the validation-exercise.zip folder from Blackboard under todays lecture notes folder. Your task is to fix the HTML in the document which contain numerous errors. To see what your page should look like, there are images inside of the assignment folder. No text content should be removed from the page, but you will need to add, delete, or move around tags. Once your page is validated, place it on your web hosting account. 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

• Make sure tags are nested correctly
• Some tags require the presence of another tag
• Some tags may be misspelled
• Submit a live link from your web host (000webhost)

HTML Research Initial Post & Response

Visit two websites and write a post about the HTML content you are seeing. Is the code easy to read? What are some of the most prevalent tags on the page? What are some tags youre seeing that you werent expecting? Does the website use semantic markup? How would you alter the HTML so that it is more user-friendly/semantic? Does the pages code validate? This initial post is due by Saturday, February 8^th, at midnight.

In your response post, look at the websites reviewed by other students and provide your take on what you are seeing. Do you agree with their assessment? Can the code be improved, or does it have good, semantic markup? The response post doesnt need to be elaborate; I want to see that you are opening up code from various websites and checking it out mostly. This response post is due by Tuesday, February 11^th, at midnight.