#### HTML and CSS Code for SEO and Social Media Friendly Blog News Website
**HTML:**
html
Your Blog Title
Article Title
Article content goes here...
Published on August 11, 2024 by Your Name
**CSS (styles.css):**
css
/* Reset default browser styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Style the header and navigation */
header {
background-color: #f2f2f2;
padding: 10px;
}
nav ul {
list-style: none;
display: flex;
justify-content: space-around;
}
nav ul li {
display: inline;
margin: 0 10px;
}
nav ul li a {
text-decoration: none;
color: #333;
}
/* Style the main content area */
main {
padding: 20px;
}
article {
margin-bottom: 20px;
}
article h2 {
color: #007bff;
}
/* Style the footer and social media links */
footer {
background-color: #f2f2f2;
padding: 10px;
text-align: center;
}
footer ul {
list-style: none;
margin-bottom: 10px;
}
.social-media a {
margin: 0 5px;
}
.social-media img {
width: 30px;
height: 30px;
}
**Explanation:**
- The HTML code provides a basic structure for a blog news website, including a header, main content area, and footer with social media links.
- It includes meta tags for SEO, such as description and keywords, and a title tag for the blog title.
- The CSS file (styles.css) contains styles for the header, navigation, main content area, and footer, as well as social media links.
**Keywords:**
- SEO-friendly
- Social media friendly
- Blog news website
- HTML and CSS
- Interactive controls
- Responsive design
- Meta tags
- Keywords optimization
- Social media profiles
- Footer links
**Interactive CSS and JS:**
To further explain the topics of SEO and social media friendliness, interactive examples and demonstrations can be created using CSS and JavaScript. These could include interactive elements for keyword optimization, responsive design, and social media integration, providing a hands-on learning experience for users.