Most important HTML tags
Published: June 25, 2025
In the world of business websites, HTML is the backbone that holds everything together. Every button, image, and line of text on your site is structured by HTML “tags” – the building blocks of web pages. Even if you’re not a developer, having a basic understanding of these HTML elements can be incredibly valuable. It helps you communicate more effectively with your web developers and understand what’s happening under the hood of your website.
For example, using clear, descriptive tags for different parts of your page gives context to browsers and search engines, helping them understand your site’s structure and purpose. In this post, we’ll introduce the most important HTML tags for business websites, explain in plain language what they do, and show simple code examples. By the end, you’ll be better equipped to oversee your website’s content and discuss changes or issues with your web team.
The <html> Tag
The <html> tag is the root of every HTML page. It wraps all the content of your website and tells the browser “this is an HTML document.” In a typical page, the <html> element is the top-level container, and everything else on the page is inside it. You won’t see this tag’s effects visually, but it’s critical – all other elements (text, images, sections, etc.) must be placed between the opening <html> and closing </html> tags for the page to work properly.
The <head> Tag
The <head> tag contains metadata – information about the page that isn’t displayed directly on the website. Think of it as the backstage of your site. Inside <head>, you typically find the page’s <title> (shown on the browser tab or window title), meta tags (like descriptions and keywords for search engines), links to stylesheets (CSS files that style your site), and scripts (for analytics or functionality). In short, <head> is where you put information about your webpage, such as its title, character encoding, and SEO-relevant info.
This data helps browsers, search engines, and other tools understand your page. For example, the <head> might include a meta description that summarizes your page content for search results (more on <meta> in the next section).
The <title> Tag
The <title> tag defines the title of the page. This title appears in the browser tab and is often what search engines show as the clickable headline in search results.
For a business website, the <title> is very important – it should briefly describe the page and ideally include your company name or keywords. For example, a homepage title might be “My Business – Quality Services in [City]”. Keep in mind that the <title> goes inside the <head> section of your HTML. It’s not visible on the page content itself, but it’s crucial for SEO and user bookmarking.
The <meta> Tags
<meta> tags provide metadata about your page, such as descriptions, keywords, or instructions for browsers. Unlike normal content, meta information is machine-readable; users don’t see it on the page, but it influences how your site is processed. One of the most important meta tags for business owners is the meta description.
This is a brief summary of the page that search engines may display below your title in search results. For example, a meta description for a services page might be: <meta name="description" content="Offering plumbing services in Springfield, 24/7 emergency support.">.
While meta descriptions aren’t a direct ranking factor, they are crucial for convincing people to click your link. Other common meta tags include the character set declaration (e.g., <meta charset="UTF-8"> to ensure proper text display) and viewport settings for mobile responsiveness. All <meta> tags belong in the <head> of your HTML.
The <body> Tag
The <body> tag contains all the content of your webpage that is visible to visitors. In other words, if it’s something users can see or interact with – text, images, videos, links, forms – it belongs inside <body> ... </body>.
Think of the <body> as the display area of your site, whereas <head> was the behind-the-scenes. There can only be one <body> tag per page, and everything you want users to view is placed between the opening <body> and closing </body> tags.
For example, if you want a headline and a paragraph on your page, those would be written inside the body section. The structure of a basic HTML page usually looks like: <html><head>...metadata...</head><body>...content...</body></html>.
The <header> Tag
The <header> tag represents the header section of a page or a section of a page. It’s typically used for introductory content or navigation aids at the top of your site or a section. On a business website, the <header> element often contains the company logo, the site title or tagline, and sometimes a navigation menu or search bar. Essentially, it’s the banner area that introduces what the page (or section) is about.
You can have a main <header> for the whole page (placed near the top of the <body>), and you can also use <header> inside an <article> or <section> to introduce that subsection. Using <header> helps search engines and assistive technologies recognize “this part is the page’s header.” It’s a semantic alternative to just using a <div> for the top part of the page.
The <nav> Tag
The <nav> tag defines a navigation section of your page. This is where you put links to the main parts of your website, such as the menu or table of contents. For example, your site’s primary menu (Home, About, Services, Contact) is a perfect use of <nav>. By wrapping your navigation links in a <nav> element, you semantically indicate that “these links form a navigation menu.”
This can help both users (with assistive technologies) and search engines understand the structure of your site. Typically, a <nav> contains an unordered list of links, but it can also contain other elements as long as they pertain to site navigation. If your site has multiple navigation areas (e.g., a top menu and a footer menu), you can use multiple <nav> tags for each set of navigational links.
The <main> Tag
The <main> tag identifies the main content of your page. This is the primary section that is unique to that page (excluding common things like headers, footers, or navigation). For a business site, <main> might encompass the main article or the core information – for example, the bulk of your homepage content, your services list, or an about-us story.
By using <main>, you’re signaling that “everything in here is the central topic of this page.” There should only be one <main> per page, and it typically comes after <header> and <nav> and before <footer>. Using <main> is great for accessibility because screen readers can jump directly to the main content. It’s also useful for SEO as it helps search engines differentiate primary content from side content.
The <section> Tag
The <section> tag defines a logical section or chapter of the page. It’s a way to group related content under a thematic unit. For instance, on a homepage you might have a “Services” section, a “Testimonials” section, and a “About Us” section – each could be marked up with a <section> element. Each <section> is typically identified with a heading (using <h2> or <h3> for example) to describe what that section is about.
The <section> tag is very flexible; use it when you want to break your page into meaningful divisions but none of the more specific semantic tags (like <article> or <nav>) apply. Using <section> can improve readability of your code and helps tools understand the structure of content. Remember that if you use <section>, it’s good practice to include a heading inside it to label that section’s topic.
The <article> Tag
The <article> tag represents a self-contained piece of content that could stand on its own. You can think of it as an independent article, blog post, news story, or any chunk of information that makes sense by itself. On a small business site, you might use <article> for a blog post, a press release, a case study, or even an individual item in a portfolio or catalog.
For example, each blog post on your “News” or “Blog” page could be wrapped in an <article> tag. The idea is that the content inside an <article> could be reused or syndicated elsewhere (like in a feed) and still be meaningful. An <article> typically has its own heading, author, date, etc., as needed. Using <article> helps search engines and readers identify each piece of content. If you have a series of posts or items on one page, marking each with <article> is a good practice.
The <footer> Tag
The <footer> tag defines the footer for a section or page. Footers usually appear at the bottom and contain information like copyright notices, contact info, legal links (privacy policy, terms of service), or author information. For a business website, the site-wide footer (at the bottom of every page) might include your company name, © copyright text, address, phone number, and perhaps links to important pages or social media.
You can also have a <footer> for an individual <article> or <section> (for example, an article footer might contain the author’s bio or related links). The <footer> element is semantic, meaning it tells the browser and other tools “this is the footer of that content”. It’s more meaningful than a plain <div> for the same purpose. Typically, you place <footer> as the last element inside <body> (for a page footer) or as the last element inside an article/section.
The <a> Tag
The <a> tag (anchor tag) is what makes hyperlinks in HTML. It’s one of the most frequently used tags because links are the essence of web navigation. The <a> tag by itself doesn’t mean much until you give it an href attribute, which stands for “Hypertext Reference.” The href attribute contains the URL or path to which you want to link. For example, <a href="https://example.com">Visit Example.com</a> creates a hyperlink that users can click to go to example.com.
You can link to other pages on your own site (using relative URLs like href="/contact" for your contact page) or to external sites (using full URLs starting with http:// or https://). You can even use <a> to link to an email address (with href="mailto:someone@example.com") or to a section of the same page (with href="#section-id" using an element’s ID). For business owners, it’s good to know that the link text (the part between <a>...</a>) should be descriptive – e.g., <a href="/services">Our Services</a> instead of “click here” – for better usability and SEO.
The <img> Tag
The <img> tag embeds an image into your page. It’s an empty element (meaning it doesn’t have a closing tag like </img> – you write it as a single self-contained tag). The most important attributes of <img> are src and alt. The src attribute (source) specifies the path or URL of the image file you want to display. The alt attribute (alternative text) provides a textual description of the image. The alt text is crucial for accessibility – if someone can’t see the image (for example, a visually impaired user with a screen reader, or if the image fails to load), the alt text describes what the image is.
For a business site, using descriptive alt text for images (like “Company Logo” or “Photo of our office building”) not only aids accessibility but also can give search engines context about the image content. In HTML, images don’t show up unless the file path in src is correct, so ensure your src is pointing to the right location (it can be a relative path like "images/picture.jpg" or a full URL). Also, you can specify dimensions with width and height attributes, but modern practice often sets size via CSS. Always include an alt attribute – if the image is purely decorative, alt can be empty (alt=""), but it must be present for valid HTML.
Headings <h1> to <h6>
Headings are defined by the <h1> through <h6> tags. These represent six levels of section headings, where <h1> is the highest (most important) level and <h6> is the lowest.
You use headings to structure your content hierarchy, much like an outline or chapter titles in a book. Typically, <h1> is the title of the page (and should be used only once per page), <h2> can be major section titles, <h3> sub-sections within those, and so on. Using headings is important for both readability and SEO. They break up content into logical sections and give clues to search engines about the key topics on the page.
For a business owner, it’s useful to know that when you create content (even in a CMS like WordPress), choosing “Heading 1”, “Heading 2”, etc., will generate these <h1>, <h2>, ... tags behind the scenes. A common mistake is to use headings just to make text big or bold – instead, use them to outline your content structure (and use CSS for styling). Keep the order – don’t skip levels arbitrarily (e.g., jump from <h1> to <h4>). Also, remember the page’s main title should be <h1> and should clearly identify what the page is about (often similar to the page title in the <title> tag).
The <p> Tag
The <p> tag defines a paragraph of text. It’s a block-level element, which means it usually appears on a new line and takes up the full width available by default (until something like CSS changes that). In HTML, wrapping text in <p>...</p> indicates those sentences form a paragraph.
For example, in this post, each block of English or Croatian explanation text is enclosed in a <p> tag in the HTML. Paragraphs help separate ideas and make the content more digestible. For business websites, paragraphs will be the primary way you’ll structure text content like company descriptions, service details, introductions, etc. Keep paragraphs reasonably short for clarity (as a rule of thumb, in web writing it’s good to break up long text into multiple paragraphs).
Technically, you can put other inline elements inside a paragraph (like links <a> or <span> for styling part of the text), but block elements (like another <div> or <h2>) shouldn’t be inside a <p>. Each paragraph tag will automatically create some spacing (margins) around the text in most browsers. If you need a line break within a paragraph without starting a new one, you can use the <br> tag, but use it sparingly – usually starting a new <p> is better for a new thought.
Lists: <ul>, <ol>, <li>
Lists in HTML come mainly in two flavors: unordered lists and ordered lists. An unordered list uses the <ul> tag and typically displays bullet points. An ordered list uses the <ol> tag and displays items in a numbered sequence (or letters, Roman numerals, etc.). Inside both <ul> and <ol>, you use <li> tags for each list item. For example, if you want to list your services, you might use <ul> since the order doesn’t matter; if you’re listing steps in a process, you might use <ol> to imply sequence. Here’s how it works:
This would produce a bulleted list of three items. If we used <ol> instead of <ul>, it would produce a numbered list. Lists are great for readability and also provide semantic structure; screen readers will announce the number of items in a list and go through them one by one, which is helpful for users. You can nest lists (e.g., a list inside a list item to create sub-items), but ensure the nesting makes logical sense. For a business site, you’ll use lists for things like feature lists, benefits, steps, or any time you have multiple related points. Remember that <ul> is for an unordered list (no inherent order or priority, just a group) and <ol> is for an ordered list (where sequence or rank is important).
The <div> and <span> Tags
<div> and <span> are two generic container tags in HTML. They don’t have any specific meaning on their own – they are used mainly to group other elements and apply styles or scripts. The difference between them is that <div> is a block-level element, while <span> is an inline element.
<div>: A<div>(division) is a block-level container for other content. Being block-level means it usually starts on a new line and can contain other block elements or inline elements. Developers often use<div>to section off parts of the page (for example, a<div>with class"sidebar"for the sidebar area, or a<div>wrapping a group of elements that need a common style).<div>has no default presentation; it’s like a plain box that does nothing until styled with CSS or manipulated with JavaScript. For non-developers, it’s enough to know that<div>is a versatile container – if you see it in your site’s code, it’s usually there for layout or scripting purposes. In older HTML (before HTML5 semantic tags), people used lots of<div>s to structure pages (“div soup”). Now we have tags like<header>,<main>,<footer>, etc., for semantics, but<div>is still useful when no semantic tag fits.<span>: A<span>is an inline container used to mark up text or a small piece of a document. Inline means it flows with the text, without starting a new line. Use<span>to target a part of text for styling or scripting. For example, if you want one word in a paragraph to be red or bold via CSS, you could wrap that word in a<span>with a class or style. Like<div>,<span>has no built-in meaning or appearance; it’s purely an element for you to hook onto with CSS/JS. Importantly, because it’s inline, you should only put text or other inline elements inside a<span>(you wouldn’t put a<div>or<p>inside a<span>because those are block elements).
In summary, use <div> for grouping larger sections (block-level) and <span> for wrapping small pieces of text (inline), especially when you need to style or manipulate them. If you were to compare it to text editing: <div> is like creating a separate paragraph or section, whereas <span> is like highlighting a word or phrase.
Example of using <div> and <span>:
Here, the <div> (with class “notice”) might be used to style the whole notice box (maybe a gray background, a border, etc.), and the <span> is used to color one part of the text red.
Conclusion
By now, you’ve seen how each of these HTML tags plays a role in structuring and describing your website’s content. For a business owner, understanding these basics isn’t about learning to code from scratch – it’s about being empowered to make informed decisions about your site.
When a developer says “We need to update the meta description” or “This heading should be an <h2> instead of just bold text,” you’ll know what they mean. You’ll also appreciate why things like proper headings and alt text matter (for SEO, accessibility, and user experience). HTML provides the semantic structure that search engines and browsers use to interpret your site.
Embracing these fundamental tags can lead to better communication with your web team and a better-performing website. Remember, you don’t need to write the code yourself, but knowing what the code does is a business advantage. As you maintain and grow your website, keep these HTML building blocks in mind – they are the language your website is written in.
New web is waiting for you
We turn your website visitors into euros. Contact us and increase your profits today!
admin@web-dance-development.hr
