Here’s a coding exercise: open new incognito tab and search for “HTML how to”. Then check if you know how to do the suggested prompts yourself.
Upon listening a podcast episode from HTML All The Things about SEO Tips I’ve come upon a nice tip about checking the search prompts: you open a new incognito window in your browser, type “<insert main topic name here> how to” and then you start typing each letter of the alphabet one by one and see what results appear in the prompts. This is usually a technique for SEO-related tasks, like figuring out what type of content you need to make if you are aiming at pushing it higher in the search results. However, I just wanted to use it for a little bit of practice, and not for making the most SEO-story ever.
So, I’ve just typed “html how to”, checked the direct prompts (without typing letters one by one), tried to figure out how I would do it myself and then compared the results.
Let’s talk about ten of them.
- HTML how to center text
With this one I would just use CSS. The most straightforward solution seems to be using a text-align property and setting it to center. As we are talking about HTML here, I assume we can just put CSS directly into it like that:
<h1 style="text-align: center;">Centered heading</h1>Then I checked the search results and found out that there is a deprecated <center> tag. It is not recommended and is only still supported by some browsers. In theory, this is a more direct answer, as we were looking for a solution with HTML, but it can hardly be recommended due to the deprecation of the feature. Of course it is mentioned pretty much everywhere and then CSS text-align is suggested instead.
- HTML how to add image
To add image we use <img> tag (self-closing usually):
<img src="link_or_path_to_image" alt="Description for accessibility." />No surprises here, as it is pretty much the main way for adding images, so this is more or less the same as what search brings you. You add self-closing <img> tag and put two attributes there: src for the link or path to your image and alt for alternate text.
- HTML how to change background color
For changing the background color we can use CSS once more. And, as we are talking about HTML primarily, again, let’s just add it directly into the targeted tag. For example:
<div style="background: green;">Black text on green background.</div>For this one I knew that search results will suggest using background-color and not just background property. It is more specific and aims at the background color only, while background property can be used for all background-related properties at once (like color, image, size, etc.). I just use it for simplicity, but the main thing to remember here is that it will reset all previous background styles set before it. Otherwise we can just use background-color:
<div style="background-color: green;">Black text on green background.</div>- HTML how to comment
To leave a comment in your HTML-code you can use the following format:
<h1>Title</h1>
<!-- Some comments here. -->
<h2>Another title</h2>This will remain in your code only and will not be displayed on the page. Pretty much the same results for the search, except for describing use-cases for the comments and showing how to add them on multiple lines:
<h1>Title</h1>
<!--
Some comments here.
Some more comments here.
-->
<h2>Another title</h2>- HTML how to change font
To change font we need to pick up the one we want to use (using Google Fonts or any other source of them) and then place the link in the <head> of our HTML-file. One possible example (if we are using Google Fonts):
<link rel="preconnect" href="font-source-link">
<link rel="preconnect" href="another-font-source-link" crossorigin>
<link href="main-link-to-the-picked-font" rel="stylesheet">We then need to add the font with CSS (either to individual tags where we want to have it, or to the main tag wrapping all the rest, if we want to have one font for every HTML-element).
<h1 style="font-family: font-name;">Heading with changed font.</h1>If we wrote our CSS in a separate file we could just add the font to :root element, but I’m trying to stick to HTML-only approach for these examples.
Search results were a little bit different for this one. Another deprecated tag <font> was mentioned among them. Apart from that though it was mostly suggested to use CSS as shown above (once again, because this tag is deprecated).
As font changing can also be related to its size, font-size CSS property can be mentioned here as well:
<h1 style="font-size: 5rem;">Heading with changed font size.</h1>There are more font-related properties of course, but the most basic ones are these two.
- HTML how to center an image
We can use flexbox CSS-property for the parent element that is wrapping our image and then set justify-content property to center:
<div style="display: flex; justify-content: center;">
<img src="link_or_path_to_image" alt="Description for accessibility." />
</div>Another way to do this is to use text-align: center instead of display: flex and justify-content: center. There are multiple solutions, but flexbox seems to be the most obvious one.
Checking the search results, one of the first solutions given is to use margin property set to auto, combining it with display property set to block. In this case we also need to add width to the element, otherwise setting its margin will not make any effect.
<img src="link_or_path_to_image" alt="Description for accessibility." style="display: block; margin: auto; width:100px;" />Overall, flexbox, text-align and margin are the main approaches for centering an image (or rather, most of the elements). The first two require image to be wrapped in a parent element and for the last one to work you need to add display and width properties.
- HTML how to link to another page
To make a link to another page we can use <a> tag with its href attribute storing a path to that page (or URL if it is a link to another resource):
<a href="path-to-the-page">Another page</a>Nothing unusual here, and the same is mostly shown among the search results.
One thing to add here is that to make this link open in a new tab we need to add a couple of attributes to it:
<a href="path-to-the-page" target="_blank" rel="noopener noreferrer">Another page in a new tab</a>- HTML how to bold text
Sticking to HTML-only approach, we can use <b> or <strong> tags to make text bold:
<b>Bold</b>
<strong>Also bold</strong>The difference between them is that <strong> is a semantic tag, meaning it might be better to use it from the accessibility perspective.
This is also pretty much the first result in search. Of course, it is additionally mentioned that we can set the font-weight CSS property separately:
<p style="font-weight:bold;">Bold text</p>- HTML how to change text color
The most direct approach for changing the text color is using CSS once again:
<p style="color: blue;">Blue text</p>Search results additionally mention the deprecated <font> tag that I have already talked about earlier. While it is possible to use it and set its color attribute to what we need, due to the tag deprecation, setting the color with CSS is a better approach.
- HTML how to
Well, Google search prompts showed the last one as simply “HTML how to”.
Most of the previous results showed W3Schools and MDN docs among the first entries, and I would say, I personally agree with them. If you just search for a database with various HTML-info, these are pretty good choices.
Talking about this little exercise in general, of course, even with a new incognito search, using a different browser, turning on all of the privacy features and setting up a VPN, we can not really say that the results will be completely general and not personalized. I assume there will still be some preferences and so on, but I was not trying to make a SEO-aimed story to get to the first page of the search results, I was just using this sort of a technique to have a little bit of fun and practice and to compare my first-come-to-mind solutions to what the search engine can bring (and yes, I think the same exercise can be done using an AI-search as well).
So, here they are, 10 search prompts and solutions to them.
Thank you for reading.
