Every news website you visit – from BBC News to The Hindu – is built on a foundation of HTML. Whether you’re a journalism student learning digital publishing or a media professional looking to understand how your content gets structured online, knowing HTML is a powerful first step. HTML (HyperText Markup Language) is the standard language that tells web browsers how to display text, images, links, and other content on a webpage. In this guide, we’ll walk through the process of building a basic news website using HTML, covering every essential tag you need to get started.
Table of Contents
- What is HTML and why does it matter for news websites?
- Setting up the basic structure of an HTML page
- Adding headings to your news website
- Writing paragraphs with the <p> tag
- Embedding images with the <img> tag
- Creating links with the <a> tag
- Navigation menu
- Inline links within articles
- Making an image clickable
- Organising data with HTML tables
- Putting it all together: a simple news homepage
- Best practices to keep in mind
- Where to go from here
What is HTML and why does it matter for news websites?
HTML stands for HyperText Markup Language. It is a markup language – not a programming language – that uses special codes called tags to define the structure and content of a webpage. Tags are keywords enclosed in angle brackets, like <p> for a paragraph or <h1> for a main heading. Most tags come in pairs: an opening tag (e.g., <p>) and a closing tag (e.g., </p>), with the content placed in between.
For news websites, HTML is especially important because it allows you to present information in a clear, organised hierarchy. Headlines need to stand out, article text must be readable, navigation links should be easily accessible, and data like election results or stock prices must be neatly structured. HTML makes all of this possible using simple, readable tags.
Setting up the basic structure of an HTML page
Every HTML webpage follows a standard structure. Before you add any news content, you need to set up the skeleton of your page. Here’s the basic framework every HTML document starts with:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Daily Tribune - Latest News</title> </head> <body> <!-- Your visible content goes here --> </body> </html>Let’s break down each part:
<!DOCTYPE html> – This declaration at the very top tells the browser that the page is written in HTML5, the latest version of HTML. It must appear only once, before any other HTML tags.
<html> – This is the root element that wraps everything on the page. The lang="en" attribute tells browsers and search engines the page is in English.
<head> – This section contains metadata – information about the page that isn’t displayed directly. Here, you set the page’s character encoding (<meta charset="utf-8">) so the browser can handle most of the world’s written languages, and the <title> tag, which defines the text shown on the browser tab.
<body> – Everything visible on your webpage goes inside the body. This is where you build the actual news site – headings, articles, images, navigation, and more.
Adding headings to your news website
In journalism, headlines are everything. They grab attention and guide readers through the page. HTML provides six levels of heading tags, from <h1> (the largest and most important) to <h6> (the smallest).
For a news website, here’s how you might use them:
<h1> – Reserved for the site name or the main, most important headline. Use only one <h1> per page for proper structure and search engine optimisation.
<h2> – Perfect for section titles like “National News,” “Sports,” or “Business.”
<h3> – Use for individual article headlines within those sections.
<h4> to <h6> – Useful for sub-sections or less prominent content.
Here’s a quick example:
<h1>The Daily Tribune</h1> <h2>National News</h2> <h3>Parliament passes new education bill</h3> <h2>Sports</h2> <h3>India wins test series against Australia</h3>The key rule: always maintain a logical heading hierarchy. Don’t skip from <h1> directly to <h4>. This hierarchy helps both readers and search engines understand the importance and relationship of your content.
Writing paragraphs with the <p> tag
The <p> tag is the workhorse of any news website. Every article body, every news summary, every description – all of it is wrapped in paragraph tags. According to MDN Web Docs, the paragraph element is used to enclose text content and define it as a distinct block of text on the page.
Here’s how it works in practice:
<h3>Parliament passes new education bill</h3> <p>The Lok Sabha on Wednesday passed the new National Education Reform Bill, which aims to restructure the higher education system across India.</p> <p>The bill, introduced by the Education Minister, received support from multiple parties during the debate.</p>Each <p> tag creates a separate paragraph with automatic spacing before and after it. For news articles, this keeps the text clean and readable – just like how articles appear in a newspaper.
Embedding images with the <img> tag
News stories are rarely complete without images. Whether it’s a photo of a political event, a sports moment, or a weather map, images bring stories to life. In HTML, you embed images using the <img> tag.
The <img> tag is a void element – it does not have a closing tag. Instead, it uses attributes to define the image source and other properties:
<img src="parliament-session.jpg" alt="Members of Parliament during the session" width="600">Here’s what each attribute does:
src (source) – Specifies the file path or URL of the image. This is a required attribute.
alt (alternative text) – Provides a text description of the image. This is essential for accessibility, so that screen readers can describe the image to visually impaired users. It also displays if the image fails to load.
width and height – Control the displayed dimensions of the image in pixels. Setting at least the width helps maintain your page layout.
For a news website, always use descriptive alt text. Instead of writing alt="image1", write something like alt="Prime Minister addressing the press conference". This is both good practice for accessibility and beneficial for SEO.
Creating links with the <a> tag
Links are the backbone of the web – they connect pages, stories, and resources together. On a news website, links are used for navigation menus, connecting to related articles, linking to source documents, and more.
The anchor tag <a> creates hyperlinks. The href attribute specifies the destination URL:
<a href="https://www.example.com/national-news">National News</a>Here are some practical ways you’d use links on a news website:
Navigation menu
A news site typically has a navigation bar at the top linking to different sections:
<a href="index.html">Home</a> | <a href="national.html">National</a> | <a href="world.html">World</a> | <a href="sports.html">Sports</a> | <a href="business.html">Business</a>Inline links within articles
You can also link specific words or phrases within an article to related stories or external sources:
<p>The <a href="education-bill-details.html">new education bill</a> was first proposed in the 2024 budget session.</p>Making an image clickable
You can wrap an <img> tag inside an <a> tag to make an image work as a link. This is often used for thumbnails that lead to full articles:
<a href="full-article.html"> <img src="thumbnail.jpg" alt="Article thumbnail"> </a>Organising data with HTML tables
News stories frequently involve data – election results, stock market figures, COVID statistics, sports scores, weather forecasts. HTML tables let you present this kind of structured information in a grid of rows and columns.
Tables use several tags that work together:
<table> – Wraps the entire table.
<tr> (table row) – Defines each horizontal row.
<th> (table header) – Defines a header cell, which appears bold and centred by default.
<td> (table data) – Defines a standard data cell.
Here’s an example of a table showing election results:
<table> <tr> <th>Party</th> <th>Seats Won</th> <th>Vote Share (%)</th> </tr> <tr> <td>Party A</td> <td>280</td> <td>37.5</td> </tr> <tr> <td>Party B</td> <td>150</td> <td>28.3</td> </tr> <tr> <td>Party C</td> <td>55</td> <td>12.1</td> </tr> </table>Tables are ideal for displaying statistical data, comparison charts, schedules, and structured directories. However, as W3Schools notes, you should avoid using tables to control the overall layout of your page – that’s an outdated approach that creates accessibility issues. Tables should be reserved strictly for tabular data.
Putting it all together: a simple news homepage
Now that you understand each individual element, let’s see how they combine to form a complete – though basic – news website homepage. Here’s the full HTML code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The Daily Tribune - Your Trusted News Source</title> </head> <body> <h1>The Daily Tribune</h1> <a href="index.html">Home</a> | <a href="national.html">National</a> | <a href="world.html">World</a> | <a href="sports.html">Sports</a> | <a href="business.html">Business</a> <h2>Top Stories</h2> <h3>Parliament passes new education bill</h3> <img src="parliament.jpg" alt="Parliament in session" width="500"> <p>The Lok Sabha on Wednesday approved the National Education Reform Bill after extensive debate. <a href="education-bill.html">Read more</a></p> <h3>India wins test series 3-1</h3> <img src="cricket.jpg" alt="Indian cricket team celebrating" width="500"> <p>Team India clinched the test series with a dominant performance in the final match. <a href="cricket-series.html">Read more</a></p> <h2>Market Update</h2> <table> <tr> <th>Index</th> <th>Value</th> <th>Change</th> </tr> <tr> <td>Sensex</td> <td>72,500</td> <td>+350</td> </tr> <tr> <td>Nifty</td> <td>22,100</td> <td>+110</td> </tr> </table> <p>© 2026 The Daily Tribune. All rights reserved.</p> </body> </html>Save this code in a file named index.html and open it in any web browser. You’ll see a basic but functional news homepage with a site title, navigation links, news articles with images, and a data table – all built with pure HTML.
Best practices to keep in mind
While building your news website with HTML, follow these practices to ensure quality and professionalism:
Use semantic elements wisely. Tags like <article>, <section>, <nav>, <header>, and <footer> are semantic HTML5 elements that describe the purpose of content. Using them improves both accessibility and SEO.
Always write descriptive alt text for images. This helps visually impaired users and improves your search rankings.
Maintain heading hierarchy. Don’t jump from <h1> to <h4>. Keep headings sequential and logical.
Validate your HTML. Use free tools like the W3C Markup Validation Service to check your code for errors.
Keep your code clean and indented. Proper formatting makes your HTML easier to read, debug, and maintain – especially as your news website grows in complexity.
Where to go from here
The HTML news page we built is purely structural – it has no colours, fonts, or layout styling. That’s where CSS (Cascading Style Sheets) comes in. CSS allows you to control the visual appearance of your HTML elements – backgrounds, typography, spacing, and responsive layouts for mobile devices. After CSS, JavaScript adds interactivity like live news tickers, search bars, and dynamic content loading.
But every professional news website starts with solid HTML. Mastering these foundational tags – headings, paragraphs, images, links, and tables – gives you the toolkit to structure any kind of news content for the web.
What do you think? Now that you understand the basics, which part of building a news website excites you the most – structuring the content with HTML, or the idea of eventually styling it with CSS to look like a real publication?
References
- https://developer.mozilla.org/en-US/docs/Web/HTML
- https://www.w3schools.com/html/html_intro.asp
- https://www.w3schools.com/html/html_basic.asp
- https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax
- https://www.w3schools.com/html/html_images.asp
- https://www.geeksforgeeks.org/html/html-tables/
- https://www.w3schools.com/html/html_tables.asp
- https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements
- https://validator.w3.org/
Leave a Reply