HTML - Semantic HTML Part 1
Instructors: Jess, Carmen, and Eda
Semantic HTML
Before this session, please:
- Read Importance of Semantic HTML: Why Should You Care About Semantic HTML? and take notes
- Read Importance of Semantic HTML: Why is it Important to Have Good Structural Hierarchy? and take notes
- Read Importance of Semantic HTML: What Is the Difference Between Presentational and Semantic HTML? and take notes
- Read Understanding Nuanced Semantic Elements: When Should You Use the Emphasis Element Over the Idiomatic Text Element? and take notes
- Read Understanding Nuanced Semantic Elements: When Should You Use the Strong Element Over the Bring Attention To Element? and take notes
- Read Understanding Nuanced Semantic Elements: What Are Description Lists, and When Should You Use Them? and take notes
- Try to go through all the steps for Build a List of Major Web Browsers and record any questions or new concepts introducted
During this session, we’ll:
- Review notes
- Review notes
- Review notes
- Review notes
- Review notes
- Review notes
- We’ll work through steps from Build a List of Major Web Browsers and talk more about browsers
After this session, please:
- Read Working with Text and Time Semantic Elements: How Do Block and Inline Quotes Work in HTML? and take notes
- Read Working with Text and Time Semantic Elements: How Do You Display Abbreviations in HTML? and take notes
- Read Working with Text and Time Semantic Elements: How Do You Display Addresses in HTML? and take notes
- Read Working with Text and Time Semantic Elements: How Do You Display Times and Dates in HTML? and take notes
- Try to go through all the steps from Build Quincy’s Job Tips Page, recording any questions or new concepts introduced
Instructor Notes
Semantic HTML is the practice of choosing HTML elements that communicate specific meaning about the content and structure of our pages.
This will make more sense as we start to learn more HTML elements, but as a general rule: Always use more specific HTML elements instead of less specific elements when we can.
A good example of an element that isn’t very specific is the div element. A div element is a container on your webpage to put content in. But the div element doesn’t tell us anything about what content is inside that container. It doesn’t carry a lot of semantic meaning.
If you need to divide your webpage into different sections of the page, what kind of element might you want to use instead of div?
If you wanted an element to contain an article that’s posted on your page, what kind of element might we want to use instead of div?
What about if we have an area of our webpage that has links to let our user navigate to different parts of our website?
Importance of Semantic HTML: Why Should You Care About Semantic HTML?
Div element does not carry any semantic meaning, it doesn’t give any hints about what content is contained in it.
Why does semantic HTML matter:
- Accessibility: Semantic HTML helps give assistive technologies more information about what is on the page, which makes using your site easier for users who rely on these supports
- Machine readable: search engines and other tools use bots to “read” the web and collect information about the sites they visit. Sites with better semantic HTML are easier for these bots to “read” and make it easier for your users to find you through search
- It teaches you good development habits: this is the least important reason, but if we want to move past making bad websites someday we’ll want to learn professional approaches like writing semantic HTML to make it easier to work with other developers!
Importance of Semantic HTML: Why is it Important to Have Good Structural Hierarchy?
Structural hierarchy: making sure your headings (h1, h2, h3, h4, h5, h6) are used in the right order and for the right reasons
These headings are used to mark topics and subtopics, not to style your text by making your text bigger/smaller. I promise we’ll learn how to style your HTML elements soon using CSS!
Let’s work together to see how these topics might be grouped together using headings with appropriate structural hierarchy
- Cryptids of the World
- What is a cryptid?
- Examples of cryptids
- North American cryptids
- Bigfoot
- The Jersey Devil
- British cryptids
- Nessie
- Cryptid links and resources
Importance of Semantic HTML: What Is the Difference Between Presentational and Semantic HTML?
Presentational HTML: Old fashioned way of writing HTML that focused on how things look. Has been replaced with using semantic HTML with CSS.
Semantic HTML: carries semantic meaning, newer, proper way of writing HTML
This section teaches us a bunch of older, presentational HTML features to show us things we shouldn’t use. I’m not taking notes on them because I don’t want to study or use these!
Understanding Nuanced Semantic Elements: When Should You Use the Emphasis Element Over the Idiomatic Text Element?
Emphasis element: used to mark a section of text that has special importance and should be emphasised. You’ll not use this element very often.
Idiomatic text element: used to be used to make text show in italics. Now used to mark text that is in a different language, has a different tone that should be marked to users or for technical terms. You’ll very, very rarely use this element. If you’re not sure if you should use this element for something, don’t use it.
Understanding Nuanced Semantic Elements: When Should You Use the Strong Element Over the Bring Attention To Element?
Bring attention to element: used to be used in presentational HTML to mark a text in bold. These days it’s mostly used to lightly highlight things like brand names, but is very rarely used.
Strong element: use to mark that this section of text is critical or important
Understanding Nuanced Semantic Elements: What Are Description Lists, and When Should You Use Them?
This is the first time we’re learning about lists, which can be a little confusing. We’ll look at simpler types of lists together soon, but description lists are a way to make lists where the items in the list are semantically linked.
You need to create a description list parent element to put your description term and corresponding description details in.
Recipes are a good example of when we would want to use description lists, because it’s important to semantically link the ingredients (description term) with the quantities (description details)
If you wanted to go back and update your recipe page lab, adding a description list might be a great way to incorporate this new knowledge!
Build a List of Major Web Browsers
Here we’re really just going to get some practice applying the concepts we’ve learned above. Let’s work through them together!