Skip to content

Refactors HTML structure for semantic compliance #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SavannahGoodnight wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Refactors HTML structure for semantic compliance #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ Remember to update the closing tags when changing an element.

### Prerequisites

Before you begin, ensure you have the following installed:
Before you begin, ensure you have the following installed:

- **Git:** Version control system to clone and manage the repository.
- **GitHub:** make sure you have an account to sync your repositories to.
Expand All @@ -31,7 +31,7 @@ To view the project locally, you can either open the project files in your code
### Tasks

Inside `index.html`:
- [ ] Update the HTML tags so that they are correct and semantic
- [X] Update the HTML tags so that they are correct and semantic


### Tips
Expand Down
7 changes: 7 additions & 0 deletions TODO.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
- [x] Fix HTML structure: change <header> to <head> and close properly
- [x] Correct malformed nav tag: fix class attribute
- [x] Replace div paragraphs with semantic <p> elements
- [x] Fix footer to use semantic <footer> element
- [x] Remove empty srcset from img tag
- [x] Change <b> to <strong> for semantic emphasis
- [x] Ensure all tags are properly closed and structured
60 changes: 32 additions & 28 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,63 +7,67 @@
<title>BigFootShadow4509's Blog</title>
</head>
<body>
<div class="header">
<div>BigFootShadow4509's Blog</div>
<!-- ERROR: Consider using semantic <header> element. -->
<!-- NOTE: Site title should be an <h1> and navigation should use <nav>. -->
<nav class="header">
<h1>BigFootShadow4509's Blog</h1>
<a href="#" class="home-link">Home</a>
</div>
</nav>

<div class="main">
<div class="post-article">
<div class="image-container">
<img src="./img/big-foot.jpg" alt="" srcset="">
<!-- ERROR: <img> has empty alt and empty srcset. Provide meaningful alt text or remove srcset. -->
<img src="./img/big-foot.jpg" alt="Silhouette of a figure among trees">
</div>
<h1 class="title">
My Bigfoot Sighting
</h1>

<div class="paragraph">

<!-- ERROR: Using <div class="paragraph"> for paragraphs. Use semantic <p> elements instead. -->
<p>
Hey there, fellow adventurers!
</div>
</p>

<div class="paragraph">
I have to admit, I didn’t expect my weekend hike in the Cascade Mountains to turn into something <i>straight out of a legend</i>. But here we are—<i>I saw Bigfoot</i>.
</div>
<p>
I have to admit, I do not expect my weekend hike in the Cascade Mountains to turn into something <i>straight out of a legend</i>. But here we are—<i>I saw Bigfoot</i>.
</p>

<div class="paragraph">
<p>
It all started early in the morning. The mist was still clinging to the trees as I set off on the trail. It was the kind of quiet that makes you feel like you're the only person in the world, and honestly, I was just enjoying the peaceful solitude when I spotted something strange.
</div>
</p>

<div class="paragraph">
<p>
I noticed a shadow in the distance—tall, dark, and… not quite right. At first, I thought it was a bear, but something felt off. It moved so gracefully through the trees, almost like it was aware of my presence. My heart skipped a beat as I realized it wasn’t a bear at all—it was a figure standing on two legs. And it was massive.
</div>
</p>

<div class="paragraph">
<p>
I tried to convince myself it was a trick of the light, but then it moved again, stepping into a patch of sunlight that filtered through the trees. I got a glimpse—this wasn’t a person in a suit, no way. It was covered in dark, matted hair, and its posture was unlike anything I’d seen before. I couldn’t make out its face, but its eyes… oh man, its eyes glowed in the dim forest like something out of a dream.
</div>
</p>

<div class="paragraph">
<p>
In a blink, it disappeared into the woods, vanishing as quickly as it had appeared. I stood there frozen, my heart still racing. No camera. No phone. Just me and the wild.
</div>
</p>

<div class="paragraph">
Some people will say I imagined it. Some will say it was a trick of the light. But I know what I saw. I don’t have all the answers, but I can tell you this—there’s something out there, something ancient, and it doesn’t want to be found.
</div>
<p>
Some people will say I imagined it. Some people will say it was a trick of the light. But I know what I saw. I do not have all the answers, but I can tell you this—there’s something out there, something ancient, and it doesn’t want to be found.
</p>

<div class="paragraph">
If you ever find yourself hiking in the wild, <b>keep your eyes peeled</b>. You might just encounter the creature of legends.
</div>
<p>
If you ever find yourself hiking in the wild, <strong>keep your eyes peeled</strong> You might just encounter the creature of legends.
</p>

<div class="paragraph">
<p>
Stay curious, Hunter
</div>
</p>

</div>


</div>

<div class="footer">
<footer class="footer">
<div>&copy; 2025 BigFootShadow4509</div>
</div>
</footer>
</body>
</html>