@VOB96, @AstroTheoretical_Physics, @Rodgy, @2000Knights, @ChocoCaramelPawn, @SPK1729, @JkCheeseChess, @LonelyMadMonkey, @KindCuteGorilla, @Sketch_28, @Alina_Bakhtina_24, @RookMindset, @nbrasington, @Duckfest, @OnyxOrca, @JustGettingThisOffMyChess, @squirtle, @NMChessTolmpress, @ArtyPentti, @JugadaBrillante, @DavidGaming08, @PokeGirl93, @nova-stone, @alphaous and @KevinChessSmith.

In line with academic practice, the most important authors in this list are the first and the last.

I apologize to those I forgot to mention 🫣

Of course, I also owe a lot to artificial intelligence, which has been a great help in this journey.

Artificial Intelligence (AI)

David is 11 years old. He weighs 60 pounds. He is 4 feet, 6 inches tall. He has brown hair. His love is real. But he is not.

In the fantastic blogging clubs I’m proud to be part of here on Chess.com - "BlogChamps" and "The Blogger Awards v2.0" - the use of AI is generally discouraged or even prohibited.

Still, I’d like to share a different perspective on this extraordinary (and let’s be honest, revolutionary) tool of our time.

Of course, relying on AI to do all the work for us would be a mistake. But if used wisely, as a support tool, it can provide valuable insights and information, and powerful help — making our work easier, more efficient, and even more creative.

Like any tool, its impact depends on how we use it. The same goes for smartphones, social media, or even nuclear energy.

My cousin, who works at MUSE – the Science Museum in Trento, Italy, once shared a funny anecdote about how different generations approach AI:

Generations Face to Face

Boomers often use it as nothing more than a search engine.

Gen Z tends to be more creative, using it as a personal trainer, a confidant, or even as psychological coaching support in times of crisis.

Young professionals are increasingly recognizing its value in drafting reports, developing conceptual maps, proofreading, and even contributing to architectural and engineering projects.

In medicine, AI will soon become a crucial assistant—especially for automatically analyzing radiological images (X-rays, CT scans, etc.) with a precision comparable to a powerful chess engine. Doctors would then step in only for the trickier cases.

As for me, AI has been an incredible ally in HTML editing.

This shows that the approach to artificial intelligence is not only a technical matter but also a cultural one.

However, a non-negligible issue is the environmental impact. Data centers consume large amounts of energy, leading to significant CO₂ emissions. Beyond energy use, AI also has a water footprint, since the large cooling systems in data centers require substantial amounts of water.

Hyperlinks – Anchors

With this tool we create a hyperlink between different parts of the same article or to a different one. It can be very useful, for example, to instantly switch from the Table of Contents to a chapter of the text and vice versa.

Table of Contents

1_ Create a table of contents [choosing the appropiate font style and size (e.g. Bold Apple System 18 px)]:

Table of contents (ToC)

Part 1 Introduction

Part 2 Openings

Part 3 Middle game

Part 4 Endings

2_ Go to the title of each chapter, choose the appropiate font style and size (e.g. Bold Apple System 24 px) and create an ANCHOR in this way:

put the cursor ahead the title of your first chapter, go to "Insert/Edit Media", select "Embed" and insert this code:

<a id=”P1”>title</a>

Steps to follow #1-2

The result is something like this:

Steps to follow #3

3_ Once you have created your little anchor, pay attention not to cancel it. You can now modify the title of the chapter as you want.

Steps to follow #3.1

4_ Now come back to the Table of content, highlight the text you want to link (Part 1 Introduction) and use the chain symbol "Insert/Edit Link" to link the text with your anchor; you can modify the name of this text as well (e.g. Introduction)

Steps to follow #4

5_ Repeat the same steps for the titles of the other chapters.

Scroll box – useful for Glossary or ToC

Creating a scroll box is a clever trick to insert data into a list while saving space. For this reason it can be very useful for the Table of Contents (ToC) or a Glossary while blogging!

Scroll bar

The way to go is always the same:

That's it.

"Insert/Edit Media", click "Embed", then insert this code:

<div style="max-height: 150px; width: 250px; overflow-y: auto; border: 1px solid #444; padding: 8px; background: #222; color: #fff; font-size: 14px;">

<p><strong>Tablet of contents</strong></p>

<p>You can add PGN, links, or any content here.</p>

<p>Scroll down! There's more text!</p>

</div>

Tablet of contents

You can add PGN, links, or any content here.

Scroll down! There's more text!

PGN= portable game notation, a format containing all the information about a chess game

Be careful to go over with the writing before inserting the box.

By changing the code a bit, you can adjust the height and width of the box. Start experimenting on your own! 😉

Scrolling Back to Top button

Self explaining 😉

Always the same path to follow:

1_ "Insert/Edit Media" -> "Embed". Then insert this code:

With this action the "Back to Top" button appears.

Now create a small anchor at the desired point in the text... usually at the beginning or at the "Table of contents".

Click there, open again "Insert/Edit Media", then "Embed" and insert this code:

<a id="top"></a>

That's it!

😃

Other Buttons

Here you find codes for different types of buttons that links to an external webpage (e.g. your Chess.com profile or a game).

It's possible to change color of text and/or background, add emoticons - even after embedding the codes using the tool "Insert/Edit Media" as always.

First code: <a href="https://www.chess.com/member/docsimooo" style="background-color: blue; color: white; padding: 10px 15px; text-decoration: none; border-radius: 5px;">Just 1 step away</a>

Just 1 step away

Second code: <a href="https://www.chess.com/blog/DocSimooo/why-mozart-is-the-magnus-carlsen-of-music" style="display: inline-block; background-color: #3498db; color: white; padding: 10px 20px; text-align: center; border-radius: 5px; text-decoration: none;">The Mozart of Chess</a>

The Mozart of Chess

Third code: <a href="https://www.chess.com/blog/DocSimooo/girls-and-youth-power" style="display: inline-block; background-color: green; color: white; padding: 10px 20px; text-align: center; border-radius: 5px; text-decoration: none;">♟️ Chess Power!</a>

♟️ Chess Power!

Firth code: <a href="https://www.chess.com/blog/DocSimooo/alexanders-choice-the-real-immortal-zugzwang" style="background-color: darkviolet; color: white; padding: 15px 30px; text-align: center; display: inline-block; text-decoration: none; font-weight: bold; border-radius: 8px;">Zugzwang?</a>

Zugzwang?

Of course it's also possible to use buttons to guide your readers to different sections within your blog, linking them to anchors on the same page.

That's the way:

Create the small anchor embedding this code with the tool "Insert/Edit Media":

<a id="P00">Table of Contents</a>

Put the cursor where you want the button, go to "Insert/Edit Media", select "Embed" and insert this code:

<a href="#P00"
style="display:inline-block; background-color:red; color:white;
padding:10px 20px; text-align:center; border-radius:5px;
text-decoration:none;">Table of Contents</a>

The button will take you to the anchor!

Table of Contents

Special text effects

I assume you are familiar with the basic text editing tools offered by chess.com.
Font style, size, and formatting are self-explanatory.

The same goes for text and background colors.

"Hide text" trick

Highlighting or hiding? 😉

Anyway you can use the "Background color" botton to highlight the text with black color.

If the text is in black colour too the sentence will be hidden. But if you later highlight with the mouse you will be able to read the hidden text.

Example: my love for Chess is well known, but she doesn't know it yet. Please don't tell her.

Highlight to see the solution, then click here.

Let's have a look to the others editing tools:

Links

Chain symbol

This function is very important to create a link to another article on the same, or better, on a new window.

The best thing to do is writing down the text, than highlighting it, clicking on the chain image and then transcribing the destination URL address.

The hyperlink could even work by writing the URL address directly on the text but the visual impact would certainly be less pleasant.

E.g. What were the values and customs of medieval society? And what was their relationship with chess? Let's see!

E.g. What were the values and customs of medieval society? And what was their relationship with chess? Have a look: https://www.chess.com/blog/DocSimooo/the-middle-ages-and-chess-il-medioevo-e-gli-scacchi

Images

Elegance

In order to have the elegant image of a camera at the bottom of the photos uploaded with the tool "Insert Image" you have to write the text of the description on the field "Credit/Caption" (in italian "Autore/Didascalia").

Videos

With the much-quoted and very useful "Insert/Edit Media" tool you can display on the blog a video simply transcribing on "General" the destination URL address.

Lovely tool

Insert game or puzzle

Another useful tool is the chessboard for displaying a game or a puzzle!

No problem to set up a position or uploading a game from Library/Game history, from FEN/PGN or by making moves.

It's a little bit trickier uploading a puzzle.

That's the way:

click the chessboard icon above the text box, select "Setup position", arrange your pieces.

Then set the move (White or Black) by selecting the appropriate option.

Click the "Theme" button and select "Puzzle".

You can also choose the style of the pieces and the chessboard.

Finally, click "Insert" to post the puzzle into your blog.

The following puzzle is taken from the video above, "Time to ride my pony". Masha has a lively intelligence and learns quickly, but the Bear is a poor player. Anyway...

....Play like Masha:

Remember that both with the "Insert chess game or diagram" tool and during Daily or Live games you can draw colored arrows and highlight squares using the mouse and keyboard.

Arrows & Highlights Quick Guide

Draw an arrow: Right-click and drag -> default color Yellow arrow

Right-click and drag + Alt -> Blue arrow

Right-click and drag + Ctrl -> Red arrow

Right-click and drag + Shift -> Green arrow

Highlight a square: Right-click on a square -> default color Red square

Right-click on a square + Alt -> Blue square

Right-click on a square + Ctrl -> Yellow square

Right-click on a square + Shift -> Green square

Let's go back to HTML codes for text editing:

Quotes

Open "Insert/edit media", then "Embed" this code:

<blockquote><p>sentence</p><br>— author</blockquote>

Respect and honor your opponents by giving your all. This way, win or lose, everyone grows.

— @DocSimooo

Scrolling Text

Cool 😃

With this tool you can create a scrolling effect for important text.

Go to "Insert/Edit Media", than to "Embed" and insert this code:

<marquee behavior="scroll" direction="right" style="font-size: 20px; font-family: Arial;">The Queen's Gambit !!</marquee>

The Queen's Gambit !!

Ping pong text

Hypnotic effect

As usual click on "Insert/Edit Media", then go to "Embed" and insert this code:

<marquee behavior="alternate" direction="left" scrollamount="8" style=font-size: 24px; color: white; font-weight: bold;"> Hello my friends 😊</marquee>

Hello my friends 😊

Strikethrough text

Self explaining picture

Select "Insert/Edit Media", then "Embed" and insert this code:

<strike>GO AWAY</strike>

The old grumpy man said: "GO AWAY", but from his lips came the words "You are welcome".

In a while his house filled with cheerful and noisy grandchildren.

What a spell! He turned black like an angry chameleon.

Collapsible text

Useful HTML tool to make sections of your blog collapsible for better organization or enhance the surprise effect.

Usual path. Go to "Insert/Edit Media" and click "Embed", then insert this code:

<details>

<summary>Click to reveal the answer</summary>

<p>This is the answer or content hidden under the summary text.</p>

And the first female World Chess Champion will be...

Click to reveal the answer

@nova-stone !!

Tables

Building tables doesn't require much explanation. You use the appropriate tool, choosing the number of rows and columns, the border style and color, the background color, the alignment of the text.

Then proceed to fill the tables in.

Example:

COMPARATIVE SKILLS TABLE FOR IN DIFFERENT TIME CONTROLS CHESS GAMES

Classical ☀️	Rapid	Blitz	Bullet
Deep Analysis
Mental Stamina
Pattern Recognition
Intuition
Time Management
Execution Speed

Legend: 5 pawns = crucial skill // 3 = important // 1 = marginal

Checkboxes

Checkboxes may be useful in blogs for checklists. The first step to create them is using as always the tool "Insert/Edit Media" above the text box. Than you have to embed the appropriate HTML code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Move Checklist</title>

</head>

<body>

<h2>Before You Move, Remember:</h2>

<ul>

<li><input type="checkbox"> Is my king safe?</li>

<li><input type="checkbox"> Did I control the center?</li>

<li><input type="checkbox"> Is any piece unprotected?</li>

<li><input type="checkbox"> Do I have any better moves?</li>

<li><input type="checkbox"> What is my opponent planning?</li>

</ul>

</body>

</html>

Example

Before you move, remember:

Is my king safe?

Did I control the center?

Is any piece unprotected?

Do I have any better moves?

What is my opponent planning?

Question & Answer (Q&A) formats

Q&A with collapsible answers

For the Q&A session with collapsible answers, the collapsible text code is added to the base code.

I keep repeating it until I’m exhausted… always the same path -> Go to “Insert/Edit Media” and click “Embed”, than insert the code:

Chess Q&A

❓ Can the Grandmaster title be awarded posthumously?

</h1>

<summary>Click to reveal the answer</summary>

❌ Yes - Try again!

</p>

❌ No - Try again!

</p>

✅ It depends - Correct!

</p>

</div></p>

This is the final result:

Can the GM title be award posthumously ❓

Click to reveal the answer

❌ Yes - Try again!

❌ No - Try again!

✅ It depends - Correct!

Have a look to the strange case of Mir Malik Sultan Khan!

Q&A with color-change effect

Here are the HTML codes for Question & Answer with the answer buttons that change color depending on whether the answer is right or wrong.

By working a little on the HTML code you can make changes, choose different colors, vary the size of the response buttons... etc.

Same path as always:

Open "Insert/Edit Media" and click on "Embed", than insert there this code:

<div style="font-familyans-serif;">
<p><strong>Who founded the PCA (Professional Chess Association)?</strong></p>

<button onclick="this.style.background='red'; document.getElementById('msg').innerText='❌ Wrong! Try again!'" style="display:block; margin:5px 0; padding:10px; border:none; background:gray; color:white; width:100%; border-radius:5px;">Kortschnoj in 1978 after his defeat at the WCC against Karpov</button>

<button onclick="this.style.background='red'; document.getElementById('msg').innerText='❌ Wrong! Try again!'" style="display:block; margin:5px 0; padding:10px; border:none; background:gray; color:white; width:100%; border-radius:5px;">Karpov at the 1981 World Championships in Merano</button>

<button onclick="this.style.background='green'; document.getElementById('msg').innerText='✅ Congratulation! Correct answer!'" style="display:block; margin:5px 0; padding:10px; border:none; background:gray; color:white; width:100%; border-radius:5px;">Kasparov in London in 1993 for the WCC match against Short</button>

<p id="msg" style="margin-top:15px; font-weight:bold;"></p>
</div>

Who founded the PCA (Professional Chess Association)?

If interested in learning more, you can find here the story of FIDE - PCA schism

Let's look at the code together for a moment:

Every answer is linked to the same question, so, for multiple questions you have to change a bit the code. I will show the code differences in bold and with color too:

<p><strong>What’s your favorite time control? Which one feels most natural to you?</strong></p>

<button onclick="this.style.background='white'; document.getElementById('msg1').innerText='✅ Wow! Studious and patient—a true intellectual.'"

style="display:block; margin:5px 0; padding:10px; border:none; background:gray; color:black; width:100%; border-radius:5px;">

Daily

</button>

<button onclick="this.style.background='green'; document.getElementById('msg1').innerText='✅ Wise, balanced, and clever—a living Buddha.'"

style="display:block; margin:5px 0; padding:10px; border:none; background:gray; color:black; width:100%; border-radius:5px;">

Rapid

</button>

<button onclick="this.style.background='yellow'; document.getElementById('msg1').innerText='✅ Lively and creative. What a charming player.'"

style="display:block; margin:5px 0; padding:10px; border:none; background:gray; color:black; width:100%; border-radius:5px;">

Blitz

</button>

<button onclick="this.style.background='brown'; document.getElementById('msg1').innerText='✅ Lightning-fast and spectacular—like a superhero.'"

style="display:block; margin:5px 0; padding:10px; border:none; background:gray; color:black; width:100%; border-radius:5px;">

Bullet

</button>

</div>

<p><strong>Which opening do you like the most?</strong></p>

<button onclick="this.style.background='white'; document.getElementById('msg2').innerText='✅ Solid choice! A master of positional play.'"

style="display:block; margin:5px 0; padding:10px; border:none; background:gray; color:black; width:100%; border-radius:5px;">

Ruy Lopez

</button>

<button onclick="this.style.background='green'; document.getElementById('msg2').innerText='✅ Sharp and tactical! You like to take risks.'"

style="display:block; margin:5px 0; padding:10px; border:none; background:gray; color:black; width:100%; border-radius:5px;">

Sicilian Defense

</button>

<button onclick="this.style.background='yellow'; document.getElementById('msg2').innerText='✅ Creative and flexible. You love to surprise.'"

style="display:block; margin:5px 0; padding:10px; border:none; background:gray; color:black; width:100%; border-radius:5px;">

King's Indian

</button>

<button onclick="this.style.background='brown'; document.getElementById('msg2').innerText='✅ Aggressive and fast. No time wasted.'"

style="display:block; margin:5px 0; padding:10px; border:none; background:gray; color:black; width:100%; border-radius:5px;">

Scandinavian Defense

</button>

</div>

What’s your favorite time control? Which one feels most natural to you?

Which opening do you like the most?

Surveys/Polls

Survey

Chess.com doesn't currently offer a built-in feature to create single or multiple-choice polls within blog posts or forums.

Polls, however, can be included via a link.

This does not apply to the Chess.com staff/admin. They have access to an internal Surveys feature that allows them to create official polls, such as the "2025 Opening of the Month Community Votes".

Here is one of the possible procedures you can use — the one I currently prefer:

- Go to strawpoll.com;

- Click on “Create Poll”;

- Insert your question;

- Add the answer options;

In the Settings:

- Check the option “Single Vote”

- Enable the option “Show results after voting” (so users can see the percentages in real time)

- Save and copy the poll link;

- Paste the link into your post on Chess.com (blog or forum).

Here an example of a poll I'm interested in: it's about strong chess players of the past not so famous even among chess enthusiasts.

If you want to give your answer click here.

I promise to write a bio about the chess player who receives the most votes.

Background music

Before we say goodbye, let's tackle together the last topic, perhaps the most fascinating one... adding a background soundtrack to the article.

That was tough!

You need an audio file (I usually prefer the mp3 format), than you have to upload it to the network (your personal web page for example). I upload my files in Dropbox.

Then copy the URL of the web site where you uploaded the audio, but you need to modify the URL slightly (change dl=0 to raw=1). This will force the file to be played.

Now go to “Insert/Edit Media” e click “Embed” (really!? I couldn't imagine it 😆), than insert this code:

<audio controls>

<source src="Your URL link to the file with the above mentioned changes" type="audio/mpeg">

Il tuo browser non supporta l'elemento audio.

</audio>

It will work properly ☺️

A good site to find free mp3 files to download is this:

https://www.chosic.com/free-music/classical/

Special thanks to @ChocoCaramelPawn

Epilogue

I truly hope this article will be helpful for improving your blog editing.

My own knowledge of HTML was close to zero, but with passion, curiosity and the will to learn, the results came surprisingly quickly.

This blog will be periodically updated to add, remove, and modify HTML commands, also based on your suggestions.

Finally I recommend checking out the BlogChamps & The Blogger Awards v2.0 Club forum, where you’ll find plenty of blogging tips and useful resources — including a great tutorial by @AstroTheoretical_Physics on creating eye-catching thumbnails.

All you need to do is join the clubs:

BlogChamps

The Blogger Awards v2.0

Now it’s your turn—I can’t wait to read your articles!

Best wishes and

see you soon,

@DocSimooo

HTML codes for chess blogging

Can the GM title be award posthumously ❓

Long live the King!