HTML tips every beginner needs to know for a stunning website!
Structuring your HTML document for a well-organized and accessible website.
Table of contents
HTML is the foundation of most web pages — it’s how we tell browsers to structure content into titles, headings, paragraphs, images, links, lists, forms, tables, and more.
In this guide to HTML tips for beginners, we’ll learn what HTML is and what it’s used for. Then, we’ll walk through the tips necessary to create stunning websites. Finally, we’ll end with a brief look at some resources you can use to continue learning and using HTML.
So, what is HTML?
HTML is a markup language that defines the structure of your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, italicise words, make the font bigger or smaller, and so on.
What is HTML used for?
HTML is primarily used for creating web pages. Because it’s open-source and supported by all modern browsers, HTML is free to use and ensures your text, images, and other elements are displayed as intended. Without HTML, all web pages would be plain text files that looked like this:
With HTML, not only can you format documents with headings, paragraphs, lists, and other elements, but you can also embed images, videos, audio files, and other multimedia via hyperlinks. And, you can link to other web pages on the same website or from another site. This allows visitors to easily navigate your website and jump between websites stored on different web servers.
HTML tips for beginners
Here are some HTML tips and tricks for newbies. If you’re just starting with building your Web pages, these techniques should be very useful to you.
1. Use semantic HTML
Use semantic HTML to accurately represent the content by using the right tags to convey the meaning, and structure of your web page. Use <header>, <footer>, <section>, <article>, and <nav> elements to structure your content.
<!DOCTYPE html>
<html>
<head>
<title>My Article</title>
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<!-- Main content goes here -->
<article>
<h1>My Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque, ipsum eget euismod sollicitudin, quam enim elementum mauris, vel fermentum tellus lorem ac mauris. Sed quis sodales ex. Donec tristique, nulla id gravida luctus, est velit posuere urna, vitae rutrum augue libero vel nulla. Pellentesque ornare, enim in posuere malesuada, erat enim sodales dolor, eu fermentum libero nulla nec ex.</p>
</article>
</main>
<footer>
<p>© 2023 My Website. All rights reserved.</p>
</footer>
</body>
<html>
<header> The element represents the introductory content at the top of a section or page, while the <footer> element represents the footer or closing content at the bottom of a section or page. The <section> element represents a section of content that is thematically related. In contrast, the <article> element represents a self-contained piece of content that can be distributed and reused independently from the rest of the page. The <nav> element represents a page section that links to other pages or different sections of the current page. By using semantic HTML, you’re making your web page more accessible, more readable, and more maintainable.
2. Use proper indentation
Use proper indentation to make your code more readable. Indent each nested element by four spaces, or one tab.
3. Use a good text editor
Use a good text editor, such as Sublime Text, Atom, or Visual Studio Code. These editors have useful features like syntax highlighting, code completion, and automatic indentation.
4. Optimize images
Optimize your images for the web by compressing them to reduce their file size. This is important because large images can slow down the loading speed of your web page, which can negatively impact user experience and search engine rankings. Hence, improving your website’s load time and overall performance.
5. Write clean and organized code
Keep your code clean, organized, and easy to read by properly indenting and using comments. Comments allow you to annotate your code and make it easier to understand. Comments start with <!-- and end with -->. This will make it easier to maintain and update your code in the future.
6. Don’t forget the accessibility
Make sure your website is accessible to everyone, including those with disabilities. Use descriptive alt tags for images, provide captions for videos, and use high-contrast colour schemes for text. This tip helps you create web pages that are usable and enjoyable for everyone.
7. Test your website
It’s a great idea to run your Web pages through an HTML validator before you publish them on your Web site. These programs will pick up potential problems such as missing closing tags and using tags that won’t work properly on all browsers. Don’t forget to test your website on different browsers and devices to ensure that it looks and functions correctly, just because your page looks great in the browser you’re viewing it with doesn’t mean it will work on other browsers!
HTML validators are also an excellent way to learn about the correct way to use HTML tags. Some good free validators on the Web include the W3C Markup Validation Service and the WDG HTML Validator. Many modern web authoring packages have built-in HTML checkers too.
8. Non-breaking spaces in HTML
Sometimes you want to keep certain words together so that they’re not split over two lines. The way to do this is with a non-breaking space. In HTML the markup for a non-breaking space looks like this:
For example, the following words will wrap if they fall at the end
<p>The quick brown fox</p>
while this example, which uses a non-breaking space, will keep the words “brown” and “fox” together even if they fall at the end of a line:
<p>The quick brown fox</p>
9. Use external stylesheets
Use external stylesheets to separate your HTML and CSS code. No more <style> tags in between your codes. This makes it easier to update your website’s style without having to modify your HTML code. You also get much finer control over the way your pages look, and you can change their appearance just by editing one style sheet file.
10. Stay up-to-date
Stay up-to-date with the latest web development trends and technologies to keep your website current and competitive.
Resources to further learn HTML
HTML: HyperText Markup Language | MDN
Conclusion
By following these tips, you can create a stunning website that is easy to navigate, accessible, and user-friendly. Good luck with your HTML.