Day 6: Structural and Semantic Tags

Today's Progress

Today I completed the Structural and Semantic Tags lesson in Skillcrush. This lesson introduces div tags and how they work on websites. Since this is the last HTML lesson before CSS, new developers must learn about this tag.

Div tags will play a bigger role in CSS so be prepared to start using them a lot more after today's lesson. A div tag is short for division. It means that it describes a division or section of a website like headers, images, lists, and paragraphs.

You won't see any changes to your text on a website right now, but behind the scenes, they are good for keeping code organized. Remember semantic web is important for all web developers and div tags are one of those tags that help make it easier for other developers to read each other's code.

Next, it was time for the coding activities. I added some div tags to the code. This took longer than I normally do div tags because I needed to make sure I had opening and closing ones.

However, I was able to get my site to match the solution Skillcrush created in CodeSandBox. Adda follows with another video about the semantic web and introduces more structural tags developers can use. These are main, aside, article, header, footer, etc.

While div tags are great on websites and you'll use them a lot, it is important to some of these other structural tags because they are much more specific and help others read your code better. Plus structural tags are good for accessibility. For example, here's some code using the header tag.

<header>

    <img src="https://cdn1.iconfinder.com/data/icons/splash-of-fruit/128/fruiticons_buttons_apple-100.png" alt="Hayley's Nutritional Coaching logo">

<h1>Hayley's Nutritional Coaching</h1>

    <ul>

        <li><a href="#services">Services</a></li>

        <li><a href="#faq">FAQ</a></li>

    </ul>

</header>

I could still use a div tag if I wanted to and still get the same result. However, the header tag gives more meaning. As you read this code, each time you see the header tag you or any screen reader will know this is the header.

Author's Note*

If you are wondering what the #services and #faq are in the code, those are anchor links. Anchor links are connected to spots on a website. You'll see them often in navigation.

Now structural tags aren't perfect. Screen readers can be picky about which tags they interpret and ignore other ones. Skillcrush says the tags the screen readers interpret act as landmarks to help users know where they are on a web page and where they need to go to find what they need. You can learn more by watching the video below of semantic tags working with screen readers.