More Semantic HTML Practice

Today's In-Class Activity

Today we'll practice more with semantic HTML for marking up text, as well as grouping content by topic and using headings to help the user know what the topics on your page are. Remember, the HTML you add to your pages tells the user (and search engines) the kind of content they're going to find.

Follow the steps below to complete this activity:

Add your name to the meta author tag above.
Open this file in your browser so you can view and test it while we code.
Review this file and its content to get a better idea of what will be on the final page.
Some of the tags have been added for you to help you see how this content could be marked up semantically. Follow along in class as we add the rest of the tags to the page.
While we work, save your file and refresh it in the browser often to ensure that it is loading as expected.

Basic Text Tags

p - for paragraph text, usually multiple lines
em - for text that needs to be emphasized in some way (this adds meaning)
strong - for important text (this adds meaning)
cite - for the title of a work
mark - marked or highlighted text (this adds meaning)
b - text that needs attention, but isn't important or a heading
i - text in an alternative voice
u - text that should appear differently than normal text, underlined by default
kbd - for keyboard input
samp - for sample output from a computer
var - for variables in a computer program

When choosing a tag pair to wrap your content in, be sure to think about what that your text actually is. Is it just a paragraph? Then paragraph tags are fine. Is there a more specific way to describe that content? Maybe it's an address or a code sample. There are a lot of semantic HTML tags for text to help you define your content in the best and most specific way possible.

Remember: HTML tags aren't used to style the text a certain way. If you want bold text but that text isn't actually important to the user or meaning of your text, don't use strong or b tags or wrap it in a heading tag pair.

Tags for Grouping and Describing Content

headings
- h1 - the most important heading, only use one per page, and it has to be first. Should be the page main topic or company name
- h2 - the second level of heading. Anything located in the document as a sub-topic of the h1 will be labeled in an h2
- h3 - third level of heading for sub-topics of level 2 headings
- h4 - fourth level of heading for sub-topics of level 3 headings
- h5 - fifth level of heading for sub-topics of level 4 headings
- h6 - sixth level of heading for sub-topics of level 5 headings
section - container for grouping related content

Headings have specific uses, and they don't have anything to do with the way they look. We use headings the way you would use an outline to map out topics for a paper. Think in terms of the main topic, sub-topics of that, and even sub-topics for more levels after that, up to six levels. A container will never have or need more than one heading inside of it.

The section is a more flexible semantic container than those we'll learn about in the next module. All sections require headings, so be sure that you understand which level is appropriate for your heading inside of any sections. You can also have a section with its own heading nested inside of another section with a heading (if the section nested inside is a sub-topic of the outer section).

Special Characters

" " - the non-breaking space symbol (used to ensure that two words are always displayed next to each other on the same line, this doesn't include or need the quotes, that's just so you can see it)
& - the ampersand (not using the entity character can cause issues on your page)
< and > - the less than and greater than characters will allow you to type these on your page and in code samples without them breaking your HTML (which uses those characters a lot!)

These special characters come in handy on the web. Some characters are things that you can't just type out on your computer, while others replace characters that could break your code. They can add formatting (like in the case of a non-breaking space), but they should not be used to replace CSS. There are a lot of these characters available, be sure to check them out. Your zyBook includes a link to a table of entity characters that is a good thing to bookmark.

Lists

ol - for ordered lists, or a list of steps that need to be completed in an order or items that will be counted
ul - unordered (bulleted) lists, those that don't have to be completed in a certain order
li - an individual list item inside of a list, this tag will work whether the list is ordered or unordered

Throughout this page, we use lists to give a list of the tags related to the topic given by the heading in each section. Lists can be very useful, as there is plenty of content that is displayed in a list format, but they also help accessibility. Lists will tell screen reader users how many elements there are in that list (they can use the list items to do that), which means that a user knows how many items are in the group that they'll have to listen to. We'll use these a lot in our pages, especially when adding navigation.

You can also nest lists inside of each other, as you saw in the headings and grouping content section above. Making your content easier to scan and understand improves the user experience, and lists can be a big part of that.