id attributeheader, main, footerarticle, section, nav, asideheader, main, footer, article, section, nav, aside)h2 section headings in sectioning tags (when they are required, when they are optional, when using them is a good idea for optional)background-color propertyYou have two pages to mark up: 1-viburnums.html and 2-pizza.html. You'll need to validate them and check them in the document outliner. Screenshots of the browser presentation and the document outliner will help you with this work.
If possible, we will work in assigned pairs on this exercise during class. If that is not possible, the exercise will be done outside of class.
On the viburnums page, you are required to put in all necessary HTML5 semantic structural tags (header, main, footer, article, section, nav, aside). Not all will be necessary.
After you have put in the markup, write an embedded style sheet with styles for the sectioning tags only. The screenshots of the page and the document outliner can help you figure out whether you have done this correctly.
Lastly, view the "on this page" submenu and create fragments in the page for each of those subtopics. You then need to use the anchor tag to create hyperlinks to the fragments you have specified in the page. This is a two-part process: firstly, use the id attribute to create the fragments. Then, you need to put the anchor tag into the list items in the submenu. The value you put in for the href attribute will cause the page to "jump" to the fragment when the hyperlink is clicked.
Reminder: for a fragment to load at the top of the page, there needs to be more content below it; enough to fill the viewport. If your fragment doesn't load at the very top, it is because the viewport is tall enough to accommodate all the information on the page. The video recap addresses this.
On the pizza page, you only need to identify and create the fragments, and fill in the href value for the hyperlinks in the main menu to each of the content areas in the page. Remember that the value for each id attribute must be unique to the page! Also, consider which tag you choose to create the fragment. The video recap addresses this.
The page is already marked up for structure and styled, so you don't need to add any structural tags or styles to it.
You want to be sure you've written valid markup and valid styles. Use the online validator tools to check your work. If there are errors, read what the validator says about them and check the lines in your markup where the errors occur. Watch the validation video for reminders about how the validator works and how to make corrections. Most errors in your markup show up as several errors in the validator because of a sort of cascading effect. Once you fix an error, several of the validator errors will probably be resolved.