We need to refactor the code a little to make it semantically correct.
Replace the required tags with semantic ones.
For the title, use the tags h1
, h2
and h3
in decreasing order of block sizes.
The element must retain the class when replacing tags.
This task is part of the Full-Stack JavaScript Course
If you have any issues with it, you can ask for community help below the post
Feel free to help others if you’ve already solved the task
index.html
<!DOCTYPE html>
<html>
<head>
<title>NEWS</title>
<style>
body {
padding: 0 60px;
}
.logo {
max-width: 60px;
}
</style>
</head>
<body>
<img class="logo" src="logo.png" alt="logo">
<div class="news-container">
<p class="container-header">Top stories</p>
<div class="news-block">
<p class="block-header">Politics</p>
<div class="story">
<p class="story-header">Politics story 1</p>
<p class="story-content">Lorem ipsum</p>
</div>
<div class="story">
<p class="story-header">Politics story 2</p>
<p class="story-content">Lorem ipsum</p>
</div>
</div>
<div class="news-block">
<p class="block-header">Sport</p>
<div class="story">
<p class="story-header">Sport story 1</p>
<p class="story-content">Lorem ipsum</p>
</div>
<div class="story">
<p class="story-header">Sport story 2</p>
<p class="story-content">Lorem ipsum</p>
</div>
</div>
</div>
</body>
</html>