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.
==> Click here to watch Skillcrush's semantic tag screen reader video!
I did ok on the practice quiz. I mixed aside the main tags in one of the questions. I didn't see the empty blank spot for one of the image attributes so I missed another question on accident.
Aside indicate content indirectly to the main content. A main tag wraps content specific to that page.
Finally, I added HTML tags to a blog post Skillcruh had created. It was hard comparing my version of the post to the one screenshot Skillcrush provided since I couldn't change my window size to see if there was a 100% match. However, I think I got pretty close to the screenshot.
Tomorrow's Plan
Tomorrow it is time to start diving into HTML. The next lesson is the introduction to CSS. This means learning what CSS is and how it works on websites.
This is the lesson where new developers start writing CSS and getting styles to appear on a website. Tomorrow's lesson will be focusing on text and how to start styling text but be prepared to do more styling in future lessons. Skillcrush started using CodeSandsBox in today's lesson so I'll need to double-check if my account is working so I'm ready to go for CSS.
SOCIAL SHARE CARD GENERATOR