HTML - Semantic HTML Part 3
Instructors: Jess, Carmen, and Eda
Semantic HTML
Before this session, please:
- Read Working with Specialized Semantic Elements: How Do You Display Mathematical Equations and Chemical Formulas in HTML? and take notes
- Read Working with Specialized Semantic Elements: How Do You Represent Computer Code in HTML? and take notes
- Read Working with Specialized Semantic Elements: What Are the U, S, and Ruby Elements Used For, and How Do They Work? and take notes
- Try to go through all the steps from Build a Cat Blog Page, recording any questions or new concepts introduced
- Complete Build an Event Hub on your own over the next few days.
- Read Semantic HTML Review and take notes
- Complete the Semantic HTML Quiz on your own to test your understanding of Semantic HTML
During this session, we’ll:
- Review notes
- Review notes
- Review notes
- We’ll review key steps and concepts from Build a Cat Blog Page together
- We’ll talk through Build an Event Hub in class to prepare you to complete your Event Hub solo.
- Review notes
After this session, please:
- Read Working with Forms: How Do Forms, Labels, and Inputs Work in HTML? and take notes
- Read Working with Forms: What Are the Different Types of Buttons, and When Should You Use Them? and take notes
- Read Working with Forms: What Is Client-Side Form Validation in HTML Forms, and What Are Some Examples? and take notes
- Read Working with Forms: What Are the Different Form States, and Why Are They Important? and take notes
- Try and complete as many steps as you can from Build a Hotel Feedback Form recording questions and new concepts introducted
Instructor notes
Working with Specialized Semantic Elements: How Do You Display Mathematical Equations and Chemical Formulas in HTML?
Many of us won’t have to use these elements, but it’s good to look over them quickly, just so we know the options to semantically represent them exist!
Superscript elements let us do tiny numbers above our normal text line
The same element can be used to do abbreviations another way!
The subscript element does the same thing as superscript, but puts the numbers below the normal text line instead of above
Working with Specialized Semantic Elements: How Do You Represent Computer Code in HTML?
Text representing computer code has a semantic element that helps people (and machines) understand the context of the text better.
You might use the code elements when you’re writing a blog post about what you’ve learned today.
The preformatted text element is used when we want our users’ browsers to see the text in the same format we’ve pasted it into our HTML file. This can be important for code because the formatting of code (especially how we indent it) can make it easier for humans to read!
We might use both of these together when we want to show longer pieces of code on our webpage.
Working with Specialized Semantic Elements: What Are the U, S, and Ruby Elements Used For, and How Do They Work?
The unarticulated annotation element is used to mark that there’s something unusual about the text. But really, it used to be an element we used to apply underlined styling before CSS existed. Most web developers today will never use it. We would using CSS now!
The strikethrough element used to be used to show strikethrough styling in text. But we would use CSS for this now!
Ruby elements are generally only used for web content from languages where the spelling or pronunciation of characters needs to be written in context above specific words. Unless you’re working with these languages (and you would know if you were) we don’t really need to worry about them!
Build a Cat Blog Page
From step 5, we see an id being used for the first time! We’re going to learn more about ids (and classes!). For now, just remember that all ids need to be unique (there can only be one element with that id on your page) and that they should be named in ways that communicate semantic meaning (because many assistive technologies use them).
We’re using these ids with anchor tags in our nav to link to different sections of our page!
At step 11 we see Lorem Ipsum, this is a common placeholder text. You’ll often use it when you need to build a website but don’t have the text that will go on your website yet.
This website includes a phone number and email address. When might we want to include these and when might we want to leave these off?
Build an Event Hub
This is a creative individual exercise, so everyone’s notes will be a little different. We’ll talk through the project together, though!
Semantic HTML Review
Big things to remember:
- Headings need to have structural hierarchy: using them to designate subheadings in the right order. We shouldn’t just use them to change text styling.
- Presentational HTML is an old fashioned way of writing HTML and some elements we could still use today to style our elements should be replaced with using CSS
- We want to write semantic HTML that communicates as much meaning as possible, to do this we’ll always use the most specific appropriate element available
- We can use id names attached to elements to create internal links that link to different sections of the same page