Tackle It Tuesday - HTML Checkboxes to "Check Off" and Strikethrough for "Cross-Outs"

I've had a few people reach out to me with HTML questions in the past. One common question has been "How do you cross words out in your posts?" You know, like this? Or how do you make a check box, like this?

To answer that question, while it's a simple answer, it isn't as easy as typing the response in a blog post or comment response how that works, because of the HTML involved, you can't just simply type the symbol needed to make it work, or else it'll attempt to create HTML coding from the use of that typed symbol, and will come out blank in response. So, because of that, I decided to tackle a tutorial for those of you who'd like to learn a little useful HTML.

Since I'm beginning a new bloggy carnival called "To-Do Tuesday", I figured it would be beneficial to some, who want to use the capability to "strikethrough" their lists or "cross them off", or if they'd like to get a little crazier and "check them off" their list, to teach those of you who would want to use those tools how to do them.

You could Google it til the cows come home, but sometimes it's better to have someone you know help you, who can answer questions should one arise. And Google doesn't talk back :)

So, first, how you can "cross off" items on your to-do list: By using the following code and editting your HTML, wrapping the phrase you wish to cross out by using the word "strike" before the word/phrase and "/strike" after it, use it with the proper symbols, as shown below (items in red would be whatever you wish to write, I'm using a To-Do list as an example):

<p>My To Do List:</p>
<strike>First Item Here</strike>
<strike>Second Item Here</strike>
Third Item Here

Which will look like this:

My To Do List:

First Item Here
Second Item Here
Third Item Here

See how I wrapped "First Item Here" separate from "Second Item Here"? You can choose to combine them, if you really wanted to, or, groups that are in a row with one command of "strike" and "/strike" but I like to be sure to cross one off at a time.

Now for those who are more skilled at HTML, or, who may want to use this checkbox instead, you can use the following to create checkboxes so that you may "check off" the items off of your list (items in red you would change to be what you'd like, of course):

<p>My To Do List:</p>
<input type="checkbox"/>First Item Here <br>
<input type="checkbox"/>Second Item Here <br>
<input type="checkbox"/>Third Item Here <br>

Which creates checkboxes, like this:

My To Do List:

First Item Here
Second Item Here
Third Item Here

This will allow you to check off, at that moment, the things you've completed, but it won't be permanent for your post. So if you closed your post out, it wouldn't stay checked. It would just be temporary for you. To keep them permanently checked, you would just change the code to read checked="yes" after type="checkbox", for each item you wish to have checked off, like this:

<p>My To Do List:</p>
<input type="checkbox" checked="yes"/> First Item Here <br>
<input type="checkbox"/>Second Item Here <br>
<input type="checkbox" checked="yes"/> Third Item Here <br>

Which will look like this:

My To Do List:

First Item Here
Second Item Here
Third Item Here

Now it's your turn! Practice here and try the above (delete all the code they have in the box once you get to that site and paste what we've worked on here) , by editing the items in red to reflect what you'd like your list to be.

What is it you'd like to use these codes for? A To-Do list? A meme? Perhaps a quiz for your readers? Let me know in the comments!

*EDITED TO ADD* new way to "check off" items - copy and paste this check off symbol!! √

For more tackles, visit 5 Minutes for Mom!

If you're just visiting, and like what you've read, why not subscribe to my blog and be sure to get more :)