Download template news html

Here is a basic template for a news article in HTML:

<!DOCTYPE html>
<html>
<head>
    <title>News Article Template</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css"> <!-- add your own stylesheet here -->
</head>
<body>
    <header>
        <h1>News Article Title</h1>
        <p>News Article Date</p>
    </header>
    <main>
        <article>
            <h2>Article Subtitle</h2>
            <p>This is a sample news article. You can add your own content here.</p>
            <p>This is a sample news article. You can add your own content here.</p>
            <p>This is a sample news article. You can add your own content here.</p>
        </article>
        <aside>
            <h3>Related Articles</h3>
            <ul>
                <li><a rel="nofollow" target="_blank" href="#">Article 1</a></li>
                <li><a rel="nofollow" target="_blank" href="#">Article 2</a></li>
                <li><a rel="nofollow" target="_blank" href="#">Article 3</a></li>
            </ul>
        </aside>
    </main>
    <footer>
        <p>&copy; 2023 Your News Organization</p>
    </footer>
</body>
</html>

You can customize this template by adding your own content, images, and styles. You can also add more sections, such as a navigation menu, a search bar, or a comments section.

Here's a breakdown of the different sections:

<header>: This section contains the title of the article, the date, and any other metadata.
<main>: This section contains the main content of the article, including the article text, images, and other media.
<article>: This section contains the article text, which can include headings, paragraphs, and other elements.
<aside>: This section contains related content, such as links to other articles or additional information.
<footer>: This section contains the copyright information and any other footer content.

You can also add your own CSS styles to customize the layout and design of the template. You can add a stylesheet link in the <head> section, like this:

<link rel="stylesheet" href="styles.css">

Then, you can add your CSS styles in the styles.css file. For example:

body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

header {
  background-color: #333;
  color: #fff;
  padding: 10px;
  text-align: center;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

article {
  background-color: #f7f7f7;
  padding: 20px;
  border: 1px solid #ddd;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

aside {
  background-color: #f0f0f0;
  padding: 10px;
  border: 1px solid #ccc;
}

footer {
  background-color: #333;
  color: #fff;
  padding: 10px;
  text-align: center;
  clear: both;
}

This is just a basic template, and you can customize it to fit your needs. You can also add more advanced features, such as responsive design, animations, and interactivity.

NewsBreakers

Download template news html