There is a way to force text-level semantics to be read out using CSS ::before and ::after pseudo elements since requires extra content that could change the meaning of a sentence without the semantics ( and do too), it could be the right approach here. How do you “laugh out loud console” someone? Without the context of strikethrough, this doesn’t make sense. When he returned from the barbers with a terrible haircut, my first instinct was to laugh out loud console him Our example from earlier would be read out like this: Unlike most text-level semantics, strikethrough adds content, rather than just wrapping text in some meaningful tags, so it’s almost impossible to progressively enhance. In other words, your sentences should make sense without emphasis those and wrappers should just offer a nice added extra for users that know they’re there. Text-level semantics like italics and bold should be treated as a progressive enhancement. Strikethrough is a difficult progressive enhancementĪgain, from my article about emphasis and screen readers: I cover the distinction between and separately. GitHub Flavored Markdown is the main culprit, and they even describe it as their “Strikethough extension”. Some Markdown compilers/variants incorrectly produce the element instead of. So with strikethough being so easy to write, what are the problems we might encounter? Not always the output you’d expect That sentence containing struck-through text would compile to: When he returned from the barbers with a terrible haircut, my first instinct was to laugh out loud console him. When he returned from the barbers with a terrible haircut, my first instinct was to ~~ laugh out loud ~~ console him. This makes it very easy to write compared to other HTML elements, which would need to be written out in full. With these variants, the syntax is usually two tildes ( ~~) either side of the text to be struck through. Why strikethough? Well, although it isn’t part of the official Markdown specification, it’s common in Markdown variants. This is true of all inline text-level semantic elements, but it’s worth drawing particular attention to strikethough. Like emphasis, strikethrough text ( ) doesn’t get read out by screen reader software.
In this case if I put tag first I am supposed to put the closing tag at last, and if I put my second tag is my second last tag must be. The order of putting the tags is not important but the order of opening and closing the tags is very important. In HTML you can attribute multiple tags to the same text.įor example if you want to have a text, which is center-aligned, italic, bold, and strike through, you should put open the tags first and close them with the same order. This is exactly like tags. All the texts that go inside these tags will be strike-through text.Įvery text inside these tags will be center-aligned.Įxample: this text will be center-aligned I don’t even know why there are two types of italic tags but that’s the way it is! Every type of text which goes inside will be ITALIC.Īll the texts that go inside these tags will be strike-through text.Įxample: this is my strike-through text This pair of tags is exactly the same as tags. everything will be bold.Įvery type of text which goes inside will be ITALIC.
#How to strikethrough text in html how to
In this tutorial I am going to show you how to code text in different methods.Įverything inside these two tags will be BOLD.