Getting Started with HTML
03/03/2026
Learn the basics of HTML for building websites. Perfect for beginners.
HTML is often overshadowed by the glitz and glamour of modern JavaScript frameworks and libraries. And/OR AI web builders... But let's be honest—without a solid understanding of HTML, you're building your web applications on quicksand. Sure, Next.js or React can abstract away a lot of complexity, but they don't replace the need to know how elements interact with each other at their most basic level.
Setting Up Your Development Environment
Before diving into HTML, ensure your development environment is ready. You'll need a text editor like VSCode. Even Notepad will do in a pinch, but I highly recommend VSCode for its features and extensions that make coding easier. A great alternative to Notepad is Notepad++ - Notepad++ is more of a lightweight code editor with syntax highlighting and other useful features.
Basic Structure of an HTML Document
A tag is a fundamental building block of HTML. It consists of an opening tag, content, and a closing tag. For example, <p>This is a paragraph.</p> has an opening tag <p>, content "This is a paragraph.", and a closing tag </p>. Tags can also have attributes that provide additional information about the element. For instance, <p style="color: red;">This is a paragraph.</p> uses the style attribute to specify the color of the text.
Every HTML document starts with a <!DOCTYPE html> declaration, which tells the browser that it's dealing with an HTML5 document. (Previous versions of HTML had different DOCTYPE declarations and early versions had no declaration. But HTML5 simplified this in 2014 and it is now the standard and unlikely to be updated again.) The root element is <html>, you will see there is an opening <html> and a closing </html> at the bottom. This is the whole document and within this tag, you'll find two main sections: <head> for metadata like title and <body> for everything visible to the viewer.
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My Website!</h1>
<p>This is a paragraph.</p>
</body>
</html>
This is a very basic HTML document. It has a heading and a paragraph, but it doesn't use any semantic elements. If you paste that into a new file and save it as index.html, then open it in a browser, you'll see a simple page with a heading, a paragraph and no styling.
The <head><title></title></head> section is crucial for SEO and accessibility, while the <body> contains the content that users interact with. In this context "title" is what the browser displays in the tab or window title. It is also used by search engines to understand the content of the page, and by screen readers to provide context to users with visual impairments. The <h1> tag is used for the main heading of the page, it is typically quite large font size while <p> is used for paragraphs of text. These tags help structure the content and make it easier for both users and search engines to understand the hierarchy and organization of the information on the page.
Semantic Elements and Accessibility
Semantic elements like <header>, <nav>, <main>, <article>, and <footer> are not just for show. They provide meaning to the structure of your document, making it easier for screen readers and search engines to understand your content. They also make it easier for us to style our pages with CSS and manipulate them with JavaScript. To see how css interacts with semantic elements, check out my Introduction to CSS for Beginners post.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semantic HTML Example</title>
</head>
<body>
<header>
<h1>My Website Title</h1>
<nav> <!-- Navigation links go here -->
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/gallery">Gallery</a></li>
</ul>
</nav>
</header>
<main>
<article> <!-- Article content goes here -->
<h2>Article Title</h2>
<p>This is an article I wrote about things.</p>
</article>
</main>
<footer>
<p>Copyright © 2026 My Website. All rights reserved.</p>
</footer>
</body>
</html>
If you copy and paste the above code into a new file (or rewrite it the way you want) and save it as index.html, then open it in a browser, you'll see how the semantic elements structure the content. The <header> contains the site title and navigation, the <main> holds the main content (in this case, an article), and the <footer> provides contact information. This structure not only helps with accessibility but also makes it easier to style and maintain your website as it grows. Some tags like <nav> and <article> don't do anything by themselves, they are just there to provide meaning and structure to the document. They can be styled with CSS and targeted with JavaScript, but they don't have any inherent functionality on their own. These elements are a later addition to HTML and are part of the HTML5 specification, which was finalized in 2014. They were introduced to improve the semantic structure of web documents and enhance accessibility.
Attributes and Their Importance
Attributes provide additional information to HTML elements. They are always specified in the start tag (not the closing tag </>), and consist of an attribute name followed by an equal sign and then the value.
<a href="https://example.com" target="_blank">Visit Example Site</a>
In this example, <a> is an anchor element (link), href specifies the URL to link to, while target="_blank" tells the browser to open the linked document in a new window or tab. target="_self" is used for going straight to the link closing the current page we are on. Generally speaking it's best to use target="_blank" for external links and target="_self" for internal links. NOTE: omitting the target attribute defaults to _self.
Attributes can also be used to add classes for styling, IDs for JavaScript targeting, and data attributes for storing custom data. Understanding how to use attributes effectively is key to creating dynamic and interactive web pages.
<a href="https://example.com" style="color: red;">Visit Example Site</a> is an example of using the style attribute to apply inline CSS directly to the element. This will make the link appear red instead of the default blue. However, it's generally better practice to use external stylesheets or <style> tags in the <head> section for maintainability and separation of concerns.
Field Notes
- Structure First: Always start with a clear structure before adding content. It's easier to add elements than to refactor an already cluttered HTML file.
- Accessibility Matters: Don't skip semantic tags just because they seem like extra work. They make your site more accessible to people with disabilities and search engines reward SEO-friendly practices. Meaning: people will actually be able to find your website if you use semantic HTML properly.
Where breakdowns happen in projects
One common pitfall is overusing inline styles or JavaScript for layout decisions that should be handled by external CSS files. While it's tempting to quickly fix an issue with a bit of inline styling, this can lead to unmaintainable codebases where changes are scattered throughout the HTML files rather than being centralized. You will learn more about this in my Introduction to CSS for Beginners post, but the key takeaway is to keep your structure (HTML), presentation (CSS), and behavior (JavaScript) separate for better maintainability and scalability.
Performance Tradeoffs (barely)
While semantic elements enhance accessibility and SEO, they do add some overhead in terms of file size compared to simpler tags. However, modern web performance optimization tools and techniques (like minification) make this a non-issue for most projects. The benefits of using semantic HTML far outweigh the minor performance costs, especially when considering the long-term maintainability and accessibility of your website. Additionally, using semantic elements can improve the readability of your code, making it easier for other developers (or your future self) to understand the structure and purpose of different sections of your HTML document.
FAQ
Q: How do I make my website responsive?
A: Use CSS media queries and flexbox/grid layouts to adapt your design for different screen sizes. Tools like Bootstrap (Open Sourced Twitter Bootstrap css) can also help streamline this process.
Q: Can I use HTML5 features in older browsers?
A: Yes, but you need to include polyfills or fallbacks for unsupported features. Libraries like "Modernizr" can help detect browser capabilities and serve appropriate content accordingly. Most modern operating systems force updates, so this is less of an issue than it used to be, but it's still something to keep in mind if you expect users with older browsers.
Q: What's the best way to learn more about HTML?
A: Dive into interactive tutorials on Codecademy or MDN Web Docs. Building small projects is also a great way to apply what you've learned.
Q: Why should I care about accessibility in HTML?
A: Accessibility ensures your website can be used by everyone, including those with disabilities. It's not just good practice; it's often required by law in some countries and can significantly expand your user base. Additionally search engines favor accessible websites, so it can also improve your SEO rankings.