3 Helpful Tips for HTML Beginners (+ My First Post! )

Hey there! Welcome to my Hashnode blog, and more specifically, my first Hashnode blog post!

After nearly a year of learning how to program, I've come to feel confident about my skills in the holy trinity of basic web development: HTML, CSS, and JavaScript. But sometimes, it's helpful to go back to basics. Like...really basic. Enter, HTML.

HTML, short for HyperText Markup Language, is the backbone of every website you've visited, and the first topic that many new developers learn. I like to think of it as the first stepping stone in the huge pond that is web development. While writing HTML code, it's useful to be aware of best practices - keep reading to learn a few tips and tricks!

Bear Coding GIF

1. Always Close Your Tags

When writing your code, don't forget to place the corresponding opening and closing tags around your text. Otherwise, your elements won't load correctly and can cause all sorts of clunky errors.

It's good to note that a few tags are self-closing, meaning that they do not need separate closing tags. This list includes:

inserting line breaks

<br/>

inserting horizontal lines

<hr/>

inserting images

<img src = "google.com/image" />

2. When In Doubt, Comment It Out

Using comments on your HTML page is a handy way to make notes for yourself or other developers to understand your code later down the line. You can use them to ask questions, explain code logic, and jot down ideas for future features.

Best of all, this code is invisible to viewers on the live webpage!

<!-- This is how you format an HTML comment. Your comment text will be invisible on your website! -- >
<!-- Reminder: update title in this section -- >
<main>
   <section>
         <title> This is a section title </title>
   </section>
</main>

3. Style HTML Using Stylesheets vs. Inline CSS

Linking a separate CSS sheet to your HTML file instead of using inline CSS makes for cleaner and more succinct HTML. It provides more control over the way your pages look, and a stylesheet can be used for multiple pages on the same site!

Don't forget to link your stylesheet in the head element of your HTML, like so:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <! -- Your main code goes here. -- >
</body>
</html>

Conclusion

If you have any suggestions or want to share some HTML tips that helped you, drop me line! I hope this post has been helpful, and happy coding!

Clueless Goodbye GIF

claudia codes