In the process of building a website, there are two important things to understand: HTML structure and semantic elements. Both play a major role in building a website that is organized, easy to read, and search engine friendly, especially Google (SEO). In this article, we will understand what HTML structure is and why semantic elements are so important.
What is HTML Structure?
HTML structure refers to the basic framework of a web page, where we can determine the content that is organized and displayed in the browser. Every time we write HTML code, we start with the declaration <!DOCTYPE html>, followed by the <html> element, which serves as the main container for all content.
Within the <html> element, there are two main sections that are important: <head> and <body>. Let's take a closer look at these two main tags.
<head>contains meta information such as the page title<title>, links to CSS files, JavaScript, or libraries<link>, and other meta settings.<body>contains all the visual content that will be displayed in the browser, such as text, images, links, and other elements.
A clean and clear structure can help the browser better understand the webpage we create. For example, if we define a title or subtitle, we can use heading tags like <h1> and <h2>. Here's an example:
<!DOCTYPE html>
<html>
<head>
<title>Learn HTML Basic with NganggurDev</title>
</head>
<body>
//main title
<h1>this is my main title</h1>
<p> lorem ipsum dolor sit amet....</p>
//sub title
<h2>this is my sub title<h2>
</body>
</html>
What are Semantic Elements?
Semantic elements are HTML elements that have a specific and clear meaning about the type of content being created. Unlike non-semantic elements such as <div> and <span>, semantic elements explicitly convey the purpose and content to both the browser and the reader. Examples of commonly used semantic elements are as follows.
<header>is used to mark the top of a page.<nav>contains navigation links that lead to other pages on the site or to specific sections on the same page.<section>is used to group content that has the same topic or theme. For example, on the About Us page, there are several pieces of content, namely Services and Testimonials. Both pieces of content can be wrapped with the section tag.<article>is used for standalone content that can be used independently. Examples include blog posts and news articles.<aside>is commonly used for additional elements such as a sidebar.<footer>is used to mark the bottom section of a page.
The Relationship Between Structure and Semantics in HTML
Structure provides a logical framework for how we organize content, while semantics gives meaning to each part of that content. What are the benefits?
- HTML code becomes neat.
- The web pages we create become easy to access.
- Search engines can more quickly understand the structure of the web pages we create.
Implementation
The following is the implementation of semantic elements in HTML.
<!DOCTYPE html>
<html>
<head>
<title>Learn HTML Basic with NganggurDev</title>
</head>
<body>
<nav>
<a href="/">Home</a>
<a href="/">Article</a>
<a href="/">About Us</a>
</nav>
<main>
<article>
<header>
<h1>Article Title</h1>
<p>Written by Admin Nganggur - 16 Juli 2025</p>
</header>
<section>
<p>content article....</p>
</section>
</article>
</main>
<footer>
<p>© 2025 All Rights Reserved | NganggurDev</p>
</footer>
</body>
</html>
The HTML structure above shows the use of semantic elements to clearly structure articles. Browsers can recognize that this part of the page is an article, who the author of the article is, when the article was published, and what the topic of the article is.
Conclusion
Understanding the structure and semantic elements in HTML is an important step in learning web development. Structure helps organize content logically, while semantics provides meaning and clarifies the purpose of each section.
Thank you, see you in the next article.
