Let’s dive into the steps to resolve this issue and ensure your site is safe and secure.

What Does “Not Secure” Mean?

The “Not Secure” warning means your site is using HTTP instead of HTTPS. HTTPS (Hypertext Transfer Protocol Secure) encrypts the data exchanged between the user’s browser and your website, preventing hackers from intercepting sensitive information.

Since September 2023 Chrome has changed how it shows whether a site is secure. Instead of the old padlock icon, you’ll now see a tune icon. Don’t worry, though — this still means your connection is secure (if it’s HTTPS). If you want more details, just click on the icon, and Chrome will give you info about the security status of the website. It’s part of Chrome’s effort to keep things clean and easy to understand while still keeping you safe!

Step-by-Step Guide to Fixing the Issue

1. Purchase and Install an SSL Certificate

First, you need to get an SSL certificate, which enables HTTPS. You can purchase one from hosting providers or get a free option from Let’s Encrypt.

Once you have it, follow these steps:

• Install the certificate via your hosting control panel or ask your hosting provider to install it.
• For WordPress users, you can use plugins like Really Simple SSL to simplify the process.

Example with SiteGround

Installing an SSL certificate on SiteGround is straightforward.

From your Site Tools, head over to Security > SSL Manager.

Select your domain, and in the ‘Select SSL’ dropdown, choose ‘Let’s Encrypt’.

After that, click Get, and SiteGround will handle the rest. It’s a quick and easy way to secure your website with just a few clicks.

2. Update Website URLs to HTTPS

Once your SSL certificate is installed, you need to make sure your website URLs use HTTPS:

• Update internal links, scripts, and images to load over HTTPS.
• Set up 301 redirects so visitors automatically go to the HTTPS version.
• You can use plugins or manually update the .htaccess file for redirection.

For WordPress users, after installing an SSL certificate, ensure that your website is being served over HTTPS.

To do this:

1. Go to Settings > General in your WordPress dashboard.
2. Check both the WordPress Address (URL) and Site Address (URL) fields.
3. Make sure the URLs start with “https://” instead of “http://”.
4. If they don’t, manually add the “s” to both URLs and save the changes.

3. Check for Mixed Content

Mixed content occurs when your webpage loads resources like images, scripts, or styles over HTTP, even though the page is served over HTTPS. This causes security warnings. Use Chrome DevTools or a mixed content scanner such as “Why No Padlock” to identify and fix these issues. Ensure everything loads over HTTPS.

4. Verify Your SSL Installation

To confirm everything is working:

• Use SSL testing tools like SSL Labs to check if your certificate is correctly installed.
• In Chrome, click the padlock icon in the address bar. If you see “Connection is secure,” you’re good to go.

5. Update Google Search Console and Analytics

Don’t forget to update your settings in Google Search Console and Analytics. You’ll need to:

• Add the HTTPS version of your website to Search Console.
• Update your site’s URL in Google Analytics to reflect the new HTTPS version.

Common Issues and Solutions

• Mixed Content Warnings: As mentioned earlier, mixed content can trigger warnings even with HTTPS. Ensure all resources (CSS, JS, images) are loaded via HTTPS.
• Expired SSL Certificate: SSL certificates expire, so make sure to renew them on time to avoid the “Not Secure” warning reappearing.

Why HTTPS is Important

Switching to HTTPS does more than just remove the “Not Secure” warning:

• Security: Encrypts data and protects users from attacks.
• SEO: Google favors secure websites, giving HTTPS sites a ranking boost.
• Trust: Users are more likely to trust and engage with your site when they see it’s secure.

FAQs

Conclusion

Fixing the “Not Secure” warning is essential for building trust with your audience and ensuring your website performs well. By following these steps, you can make sure your website is secure and offers a safe browsing experience for all users.

So, get started today with installing an SSL certificate and enjoy the benefits of a fully secure website!

The post How to Fix ‘Not Secure’ Website in Chrome: A Step-by-Step Guide appeared first on Mark Hendriksen.

What is an HTML Horizontal Line?

So, let’s start with the basics. An HTML horizontal line is created using the <hr> tag. Think of it as a simple way to draw a line across your webpage. It’s a quick and easy way to separate sections of content. Here’s a basic example:

<hr>

Yep, it’s that simple! Just <hr> and you’ve got a horizontal line. But there’s more to it than just that.

A Little History

The <hr> tag has been around since the early days of HTML. Back then, web design was pretty basic, and the <hr> tag was a handy tool for organizing content. Fast forward to today, and it’s still useful, though we have a lot more styling options now.

How to Use the <hr> Tag

Basic Syntax

As we’ve seen, the basic syntax is super straightforward:

<hr>

But did you know you can customize it with attributes?

Attributes of the <hr> Tag

You can add attributes to change the look of your horizontal lines. Here are a few:

• Width: Controls how wide the line is.
• Size: Changes the thickness.
• Color: Adds color to the line.

Here’s how you can use them:

<hr width="50%" size="5" color="#FF0000">

And this is how it will look:

Styling with CSS

For even more control, you can style your horizontal lines with CSS. This is where things get fun! Check out this example:

.custom-hr {
    border: none;
    height: 2px;
    background-color: #333;
}

And in your HTML:

<hr class="custom-hr">

Now you’ve got a sleek, custom horizontal line.

Practical Use Cases

Separation of Content

Horizontal lines are perfect for separating sections of content. They make your webpage easier to read and more visually appealing. For instance:

<h2>Section One</h2>
<p>Some content here...</p>
<hr>
<h2>Section Two</h2>
<p>More content here...</p>

Design and Aesthetics

They’re not just functional—they can also enhance your site’s design. Imagine a stylish line under your headings or between paragraphs to add a touch of elegance.

Accessibility Considerations

Don’t forget about accessibility. Make sure your lines have enough contrast and consider using ARIA roles if needed to ensure they’re accessible to all users.

Common Mistakes and Best Practices

Common Mistakes

Here are some common pitfalls:

• Using <hr> for layout: It’s tempting, but horizontal lines are for decoration and separation, not layout.
• Inconsistent Design: Keep your lines consistent with your overall design to avoid a cluttered look.

Best Practices

• Keep it simple: Less is more. Use horizontal lines sparingly.
• Ensure readability: Make sure your lines don’t interfere with the readability of your content.

Advanced Tips and Tricks

Responsive Design

Want your lines to look great on all devices? Use CSS media queries to make them responsive:

@media (max-width: 600px) {
    .custom-hr {
        width: 100%;
    }
}

Using SVG for Custom Designs

For something really unique, try using SVG. Here’s a quick example:

<svg width="100%" height="10">
  <line x1="0" y1="5" x2="100%" y2="5" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>

Using the Separator Block in WordPress

If you’re using WordPress, you’ve got a handy tool at your disposal: the Separator block. It’s essentially a horizontal line, but it’s super easy to use and customize.

Adding a Separator Block

1. Open the WordPress Editor: Create or edit a post or page.
2. Add a Block: Click the + button to add a new block.
3. Search for “Separator”: Type “Separator” in the search bar and select it.

Voilà! You’ve added a horizontal line to your content.

Customizing the Separator Block

Once you’ve added the Separator block, you can customize it:

• Styles: Choose between Default, Wide Line, or Dots.
• Color: Change the color to match your theme.
• Width: Adjust the width to make it fit your design.

Here’s how it might look:

<!-- Default Style -->
<div class="wp-block-separator"></div>

<!-- Wide Line -->
<hr class="wp-block-separator has-css-class wide-line">

<!-- Dots -->
<hr class="wp-block-separator has-css-class dots">

The WordPress Separator block makes it easy to add and style horizontal lines without touching any code, perfect for those who prefer a more visual approach.

Conclusion

We’ve covered a lot, from basic usage to advanced tips, and even how to use the Separator block in WordPress. By now, you should be ready to add some stylish horizontal lines to your website. So go ahead, experiment with different styles, and see what works best for you. And if you have any questions or cool designs to share, drop them in the comments below!

Additional Resources

Looking to learn more? Here are some great resources to check out:

• HTML Tricks for Non-Technical Marketers
• W3Schools <hr> Tag Reference

Happy coding!

The post What is HR in HTML? Understanding and Using Horizontal Lines in Web Design appeared first on Mark Hendriksen.