Top HTML codes every new blogger needs to know

HTML is the language of the web. It’s used to create a website, and it’s one of the most important skills that is simple to learn as a blogger. In this guide today, I will show you top HTML codes every new blogger needs to know.

 Hypertext Markup Language (HTML) with the aid of tags allow you to create web pages. They help in search engine optimization (tell search engines the type of content you create on your website and how it should be displayed).

As a new blogger, it is important to get familiar with basic HTML codes. While many blogging platforms, like WordPress or Blogger offer visual editors, if you know some codes, they can help you change your blog’s desiggs, features and functionalities. With HTML, you can have more control over how your blog content appears.

Whether it’s adding links, embedding media, or styling text, understanding some key HTML codes will give your blog posts a more professional look. You may see our guide on how to disable the link in the comment author name on a web post.

Top HTML codes every new blogger needs to know

In this article, we’ll show you top HTML codes that you should know.

Now, let us get started.

1. Basic Text Formatting Tags

HTML offers simple tags to format text in your blog posts. Here are the ones you’ll use most frequently:

• <b> or <strong>: Make text bold.
  • Example: <b>This is bold text</b>
• <i> or <em>: Italicize text.
  • Example: <i>This is italic text</i>
• <u>: Underline text.
  • Example: <u>This is underlined text</u>

Those tags help emphasize important sections of your post and improve readability.

2. Adding Links

Links are one of the most critical elements of a blog. With HTML, you can easily create clickable links to other web pages:

• <a>: The anchor tag is used to create a hyperlink.
  • Example: <a href="https://www.example.com">Click here to visit a site</a>

Make sure to always add a descriptive text within the <a> and </a> tag so your readers know where the link will take them.

3. Creating Lists

Whether you’re writing a tutorial or listing your favorite tools, HTML allows you to organize items into lists. There are two main types:

1. Ordered List (<ol>): A numbered list.
   • Example: <ol> <li>First item</li> <li>Second item</li> </ol>
2. Unordered List (<ul>): A bulleted list.
   • Example: <ul> <li>First item</li> <li>Second item</li> </ul>

Lists help structure your content and make it easier to be understood by readers.

4. Embedding Images

To make your blog posts visually appealing, you’ll need to add images. The <img> tag is used for this purpose:

• <img src="image-url" alt="description of image" />. Example: <img src="https://www.example.com/image.jpg" alt="Founder of fastknowers.com" />

Always use the alt attribute to describe the image. This helps to improve SEO.

5. Headings for Structure

Headings are essential for organizing your content. There are six levels of headings, from <h1> (the most important) to <h6> (the least important).

• Example: <h1>Main Heading</h1> <h2>Subheading</h2> <h3>Sub-subheading</h3>

Use headings to break up your blog post content and inadvertently make it easier for readers to skim through and understand your post. You may see also how to use a heading tag on your blog.

6. Adding Videos

Video content is becoming increasingly popular. HTML makes embedding videos into your blog posts easy. Below is an HTML code to add a video to a blog post or web page:

• <iframe> – For embeding videos from YouTube.
  • Example: <iframe width="560" height="315" src="https://www.youtube.com/embed/your-video-id" frameborder="0" allowfullscreen></iframe>

This tag allows you to embed videos to your blog post to make your content more engaging.

7. Creating Line Breaks and Paragraphs

To ensure your content is easy to read, proper spacing is essential. HTML uses two simple tags for this:

• <p>: Defines a paragraph.
  • Example: <p>This is a paragraph of text.</p>
• <br>: Inserts a line break.
  • Example: This is a line of text.<br>This is the next line.

This HTML code tag help you to use paragraphs to group related sentences and line breaks to split content where necessary.

8. Inserting Tables

If you need to display data in a structured way, HTML tables can be helpful:

• <table> (Defines the table).
  • Example: <table> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> </table>

Tables are great for presenting data, comparisons, or any information that needs a grid layout.

9. Anchors for Internal Links

Internal linking is crucial for guiding your readers through related content on your blog and improving SEO. Using the <a> tag, you can create both internal and external links. However, with anchor links, you can also link to specific sections of your blog post.

• Example of an anchor link within a post: <a href="#section2">Jump to Section 2</a>
  • Then, in the section you want to jump to, you add the id attribute
• Example of an id attribute: <h2 id="section2">Section 2: Subheading</h2>

This technique is helpful for creating a table of contents in longer posts to improve the navigation experience for readers. You may see our guide on how to add a navigation menu on a WordPress blog and website.

10. Blockquotes for Citations

If you’re quoting someone or referencing text from another source, the <blockquote> tag helps to format it properly and distinguish it from your original text.

• Example: <blockquote> This is a quote from a notable author. </blockquote>

Blockquotes usually render as indented text, clearly separating it from your content. This is useful when sharing notable insights or making references in a post.

11. HTML Comments

When you are creating a web page using HTML and other languages, it’s helpful to leave notes (comment) for yourself or others without them appearing on your published page. Below is an example of an HTML comment.

• Example: <!-- This is a comment that will not be visible on the page -->

Comments are an excellent way to mark sections of your code that may need future adjustments or to remind yourself.

12. The Div and Span Tags

Div (<div>) and Span (<span>) tags are two HTML tags that every blogger should get familiar with. They are used primarily for layout and styling purposes:

• <div>: (used to group block-level content).
  • Example: <div>All of this content is inside a div container</div>
• <span>: (used to group inline content).
  • Example: <span>This is a span within a sentence.</span>

While these tags don’t have any specific styling by themselves, they are often used alongside CSS to structure and style content. Learning how to use <div> and <span> effectively will prepare you for more advanced customizations later. You may see our guide on how to use the Span tag with CSS.

13. Meta Tags for SEO

While not directly visible to readers, meta tags play an important role in your blog’s SEO (Search Engine Optimization) and how your blog appears in search results. Some of the most important meta tags include:

• <meta name="description" content="Your blog description here." />
  • This tag provides a brief description of your blog post for search engines and may show up in search results.
• <meta name="keywords" content="blogging, HTML, beginner tips" />
  • This helps search engines understand what keywords are relevant to your blog post.

Adding meta tags to your blog’s HTML improves the chances of your content being discovered by search engines, helping you attract more visitors.

14. Favicon

A favicon is the small icon that appears in the tab of a web browser when someone visits your blog. You can add a favicon to make your blog look more professional and recognizable by using the following HTML code:

• Example: <link rel="icon" href="https://www.example.com/favicon.ico" type="image/x-icon">

This will add your custom icon to the browser tab.

15. Styling Your Content with Inline CSS

Though Cascading Style Sheets (CSS) is a separate topic, you can apply inline CSS to style specific elements directly within your HTML code. This gives you the ability to customize text color, font size, background, and more.

• Example: <p style="color: blue; font-size: 18px;">This text is blue and 18px in size.</p>

While inline CSS is not recommended for large-scale design projects, it’s a great way for beginners to tweak the appearance of a specific web content.

16. Embedding Social Media Feeds

If you want to share your social media content on your blog, embedding a Twitter feed or Instagram post is a great way to keep your audience connected across platforms. Most social media platforms provide HTML embed codes that can be inserted into your blog.

• Example for Twitter: <blockquote class="twitter-tweet"> <a href="https://twitter.com/user/status/1234567890"></a> </blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Embedding social media feeds creates dynamic content that tends to keep your blog fresh and up-to-date with the latest from your social profiles. You may see our step-by-step guide on top 13 social media platforms in the world and their founders.

17. HTML Forms

If you want to have a subscription form on your blog, HTML will be helpful instead of using a plugin. Here’s a simple example:

• Example: <form action="/submit-form" method="post"> <label for="name">Name:</label> <input type="text" id="name" name="name"> <label for="email">Email:</label> <input type="email" id="email" name="email"> <input type="submit" value="Submit"> </form>

This creates a simple form with fields for a name, email, and a submit button. As you grow as a blogger, you might want to integrate these forms with tools like Mailchimp to build email list You may see our guide on how to build an email list for your website.

18. Creating Buttons with HTML

Buttons are useful for calls to action, CTA (a button to encourage visitors to subscribe to a newsletter or to buy a product). HTML allows you to create basic buttons like that using the <button> tag.

• Example: <button type="button">Subscribe now!</button>

You can also link buttons to different pages or actions:

• Example (Linking to a URL): <button onclick="location.href='https://www.example.com';">Go to Example</button>

Using buttons on your blog can drive user interaction and improve engagement.

19. Adding Audio Files

If you’re a podcaster or simply want to add some audio content to your blog posts, there is an HTML tag for it.

• <audio>: (tag to embed audio files like MP3 or WAV.
  • Example: <audio controls> <source src="audio-file.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio>

The controls attribute adds play, pause, and volume controls to the audio player. This is perfect for embedding interviews, music, or podcasts into your blog.

20. Responsive Images with HTML

In today’s world, mobile-friendliness is key. When adding images to your blog, you’ll want them to adapt to different screen sizes. By using HTML attributes, you can make your images responsive. Below is an example:

• <img> with width and height: <img src="image.jpg" style="width:100%; height:auto;">

This code makes sure the image adjusts its size to the screen’s width, preventing it from breaking your blog layout on mobile devices. You may see our expert guide on how to make a website using HTML and CSS (step-by-step).

21. Embedding Google Maps

Adding a Google Map to your blog is an excellent way to show your business location. Whether you’re blogging about travel or running a business, embedding a map can be useful.

• Example: <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3164.8338910313653!2d-122.084249!3d37.421998999999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2z37KwMjUnMTYuMCJOIDEyMsKwMDUnMDAuMCJX!5e0!3m2!1sen!2sus!4v123456789" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"> </iframe>

This will embed an interactive Google Map into your blog post, making it easier for visitors to navigate and locate you.

22. Including Downloadable Files

Sometimes you might want to offer your readers downloadable resources, such as eBooks, checklists, or guides. You can easily create a downloadable link using HTML.

• Example: <a href="file.pdf" download>Download eBook</a>

The download attribute ensures that the linked file will be downloaded instead of reloading it. This can help you offer valuable content to your readers.

23. Responsive Layout with HTML5

Newer versions of HTML (HTML5) have introduced semantic elements that make your blog structure clearer and more SEO-friendly. These elements help browsers and search engines understand the purpose of each section. Here are some useful tags:

• <header>: Defines the header section of your blog.
• <nav>: Used for navigation links.
• <article>: Marks a self-contained blog post.
• <section>: Defines sections within your post.
• <footer>: Defines the footer section of your blog.

Example: <header> <h1>Welcome to My Blog</h1> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <article> <h2>Blog Post Title</h2> <p>This is the content of the blog post.</p> </article> <footer> <p>&copy; 2024 My Blog</p> </footer>

Using these semantic tags search engines like Google will better understand your blog post and rank you and categorize you accordingly. You may see our guide how to create metadata for your content (blog & website).

24. Embedding Interactive Content

To keep your audience engaged, you can add content such as polls, quizzes, or other widgets. Many platforms provide HTML embed codes that you can directly insert into your blog.

For example, embedding a Google Form:

• Example: <iframe src="https://docs.google.com/forms/d/e/example-form/viewform?embedded=true" width="640" height="800" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>

The Google form above will ask them questions to gather their feedback from them.

25. Custom Fonts and Typography

Typography makes your content look more appealing. HTML can help you embed custom fonts using services like Google Fonts and apply them to your blog text.

• Example: <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <style> body { font-family: 'Roboto', sans-serif; } </style>

This allows you to easily customize the look of your blog without a CSS.

26. Responsive Iframes

If you’re using Iframes to embed content like videos, maps, or widgets via an <iframe>, it’s important to make sure that they are responsive so that should they look good on all devices. You can achieve this with some simple inline CSS with the aid of HTML.

• Example: <iframe src="https://www.example.com" style="width:100%; height:auto;"></iframe>

This ensures that your embedded content adapts to the screen size, maintaining a good user experience on mobile and desktop. You may see our guide on how to design WordPress website using Elementor (free).

27. HTML Accessibility

If you consider every type of person to easily access your blog, the sky is your limit. Even though you don’t expect to have readers with disabilities on your blog based on your niche, it is important for SEO. Using several tags and attributes of HTML, you can make your blog content more accessible to everyone. Below are some examples of HTML accessibility.

• Alt Text for Images (alt): Always include descriptive alt text for your images.
  • Example: <img src="image.jpg" alt="Description of image">
• ARIA (Accessible Rich Internet Applications): These attributes make dynamic content more accessible. For example: <button aria-label="Submit Form">Submit</button>

By ensuring accessibility, you can reach a wider audience and improve the usability of your blog.

28. Preformatted Text with the <pre> Tag

If you ever need to display code snippets or preformatted text (such as poetry or ASCII art) where spacing and line breaks matter, the HTML <pre> tag is useful.

• Example: <pre> This text preserves spacing and line breaks. </pre>

This tag ensures that text is displayed exactly as you type it, maintaining whitespace and formatting.

29. CSS Grid for Advanced Layouts

Many modern bloggers use CSS Grid for more complex, responsive layouts. CSS Grid allows you to structure your blog layout in rows and columns in a very flexible way.

• Example: <style> .container { display: grid; grid-template-columns: repeat(3, 1fr); } .item { padding: 10px; border: 1px solid #ddd; } </style> <div class="container"> <div class="item">Box 1</div> <div class="item">Box 2</div> <div class="item">Box 3</div> </div>

This kind of layout control allows you to create professional and visually appealing blog designs with a free theme with ease. You may see our expert guide on top best themes to use to create a website for public speakers.

30. Using the <figure> and <figcaption> Tags for Images

When you add images to your blog, it is good to provide captions for them in order to give them context and accessibility. The <figure> and <figcaption> tags work together to wrap images and provide captions.

• Example: <figure> <img src="image.jpg" alt="A beautiful view of the mountains"> <figcaption>A beautiful view of the mountains</figcaption> </figure>

These tags help create a clear connection between your images and their descriptions. This makes them to be better readabile and has a professional look.

31. Embedding HTML5 Video Files

If you prefer hosting videos directly on your blog rather than embedding from third-party platforms like YouTube, you can use the HTML5 <video> tag. Though, we don’t even advice you to directly upload video on your blog.

• Example: <video width="600" controls> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video>

This allows you to offer video content without relying on external services. However, make sure your hosting plan supports the bandwidth for video hosting. You may see our guide on benefits of Hosting Videos on Third-Party Platforms on WordPress blogs.

32. Keyboard Shortcuts Display with <kbd> Tag

If you’re writing tutorials or guides, and need to show keyboard shortcuts, the <kbd> tag can be used to highlight them.

• Example: To save your work, press <kbd>Ctrl</kbd> + <kbd>S</kbd>.

This will display the keys as inline elements, making them stand out in your text.

33. Strikethrough Text with <s> or <del> Tags

Sometimes you might want to show text that has been “crossed out,” either for stylistic reasons or to show that something is no longer valid. The <s> and <del> tags of HTML can be used to display strikethrough text.

• Example: <p>This item is <s>no longer available</s>.</p>

This creates a visual cue that something has been removed or is outdated.

34. Superscript and Subscript Text

If you’re writing content that involves scientific notations, mathematical formulas, or footnotes, you’ll likely need superscript and subscript text. HTML provides <sup> for superscript and <sub> for subscript.

• Superscript Example: H<sup>2</sup>O
• Subscript Example: E = mc<sub>2</sub>

These tags are crucial for presenting accurate technical information in your blog posts.

35. Tables with Borders and Cell Padding

We’ve already discussed tables before, but that was not enough, because you may want to add borders or adjust the space between cells. Isn’t it? To achieve that, you can use inline CSS or specific attributes like border and cellpadding.

• Example: <table border="1" cellpadding="10"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> </table>

This will create a table with borders and padded cells, making the content within more visually distinguishable.

36. Defining Key Terms with <dfn> Tag

If you’re introducing a new term or concept in your blog, you can use the <dfn> tag to define it. This provides a semantic cue that the enclosed word or phrase is being introduced for the first time.

• Example: The term <dfn>blockchain</dfn> refers to a decentralized digital ledger.

This is especially useful in technical, academic, or educational blog content where definitions are commonly needed.

37. Creating Horizontal Rules with <hr> Tag

To break up sections of your blog posts to provide visual separation, you can use the <hr> tag to insert a horizontal rule (a line).

• Example: <p>This is some text.</p> <hr> <p>This is more text after the line break.</p>

This tag is useful for dividing content into sections without CSS styling. You may see our guide on how to use a heading tag on your blog.

38. Date and Time with <time> Tag

For blogs that regularly publish date-sensitive content (like news articles or event information), the <time> tag can be used to mark specific dates and times, which is good to rank a post on search engines.

• Example: <p>The event will be held on <time datetime="2024-08-25">August 25, 2024</time>.</p>

This makes the date to be readable by search engines like Google, Bing and others. So if you want your blog content to be time-sensitive by search engines, then use that HTML tag.

39. Highlighting Important Text with <mark> Tag

If you want to highlight specific text in your blog post to draw attention to it (similar to using a highlighter in a book), the <mark> tag can be used.

• Example: <p>This is a <mark>highlighted</mark> section of text.</p>

This is great for drawing attention to key points, especially in educational or tutorial blog posts.

40. HTML Entities for Special Characters

When you need to include special characters in your content (like ampersands, copyright symbols, or non-breaking spaces), you can use HTML entities.

• Examples: © for © & for &   for a non-breaking space

Using HTML entities ensures that these special characters display correctly on your blog, avoiding encoding issues.

41. Creating Tooltips with title Attribute

You can provide extra information to your readers through tooltips that appear when they hover over an element. This can be done using the title attribute.

• Example: <p title="This is a tooltip">Hover over this text to see the tooltip.</p>

Tooltips attribute helps to provide helpful, hints to guide your readers.

42. Displaying Code Snippets with <code> Tag

If your blog covers programming or technical topics, you’ll often need to display code snippets. The <code> tag is designed to display inline code in a monospaced font.

• Example: To print text in Python, use <code>print("Hello World")</code>.

This tag ensures that code snippets are clearly distinguished from your original blog post text.

43. Preserving Whitespace with <pre> Tag

Sometimes, you need to preserve the exact formatting and whitespace of text (for example, when displaying code blocks). The <pre> tag ensures that line breaks and spaces are displayed exactly as written.

• Example: <pre> def function(): print("This is indented code") </pre>

This is essential for displaying code or preformatted text.

44. Inserting Inline Quotes with <q> Tag

When you want to insert short quotes within your text in the same paragraph, the <q> tag is the proper choice. It automatically adds quotation marks around the quoted text.

• Example: <p>The author stated, <q>This is a direct quote</q>.</p>

For larger block quotes, the <blockquote> tag (previously mentioned) is more appropriate.

45. HTML Forms with File Uploads

If you want your visitors to upload files through a form (for instance, submitting images or documents), you can add a file input field to your form.

• Example: <form action="/upload" method="post" enctype="multipart/form-data"> <label for="file">Choose file:</label> <input type="file" id="file" name="file"> <input type="submit" value="Upload"> </form>

This is useful if your blog involves people to submit their content for submissions. You may see our guide on top email marketing platforms in the world in 2024.

46. Embedding PDFs with <embed> Tag

If you want to embed a PDF directly within your blog post, you can use the <embed> tag.

• Example: <embed src="document.pdf" type="application/pdf" width="600" height="400">

This allows users to view the PDF directly within the page even if he has not downloaded it.

47. Password Fields in Forms

If you’re adding login or registration forms to your blog, using a password input field ensures that users’ passwords are masked for privacy.

• Example: <form> <label for="password">Password:</label> <input type="password" id="password" name="password"> </form>

Password masking is good to be on uyour blog form for protecting users’ privacy. You may see our guide on how to remove email and website fields from your blog’s comment form.

48. Required Fields in Forms

When creating forms on your blog, you may want to ensure that certain fields are mandatory. HTML’s required attribute forces users to fill out these fields before submitting the form.

• Example: <form> <label for="email">Email:</label> <input type="email" id="email" name="email" required> </form>

This improves form validation and making sure the user is not a bot. You may see our expert guide on how to add a captcha to your website or blog.

49. HTML5 Autocomplete for Forms

You can help users fill out forms on your blog faster by enabling autocomplete with the autocomplete attribute. Using this HTML tag allow your users’ browsers to suggest their previously entered information autocompleting the form.

• Example: <form> <label for="name">Name:</label> <input type="text" id="name" name="name" autocomplete="on"> </form>

This improves the efficiency of form-filling and enhances user experience.

50. Creating Search Fields with <input type="search">

If you want to provide a search feature on your blog, the <input type="search"> is designed for search input fields.

If you know that this article has helped you know the top HTML codes every new blogger needs to know, then please subscribe to my YouTube channel for more updates. You can also find me on Facebook.

• Example: <form> <label for="search">Search:</label> <input type="search" id="search" name="search"> </form>

This ensures that users can easily search for content within your blog.

Conclusion

Hope with these top 50 HTML codes listed and explained in this article above, you have known everything you need to customize and take your blog to the next level. You may see our expert guide on how to check your blog appearance on different devices.