Trying to understand the role of semantic markup

Hello, I’m going through the front end developer course right now, and I’m reading the book Html and CSS by John Duckett, and I’m realizing that html’s purpose really is to mark down what is on the page, like so that it is self aware or something?
How much are semantic tags used in practice? Like if I were to put a contact section in my website, and would I really put my email address and physical location between <address> tags? And if I referenced a book name, would I really use the <cite> tag? Or what about the <abbr>, <blockquote> or <em> tags? All three of these change the way the website behaves and looks, which will require me to undo these changes in CSS if I don’t want them to appear that way, correct?

Do you do these things for accessibility, so that the website is aware of the content that is in it? What if I didn’t want the quote to be indented, but is it really necessary to use <blockquote> just so that screen readers know that it is a quote?

Thanks a lot :slight_smile: I haven’t gotten to the CSS section yet, hopefully once I get there things will click for me. I appreciate your help!


It is good practice to use semantic markup.
Yes, using specific tags to describe the HTML helps accessibility as the screen reader knows what the content is about.

You don’t need to keep the standard way that these elements look.
For example, you could apply this CSS rules to the <cite> tag to make it exactly like a <p> element:

cite {
    font-style: normal;

So using semantic markup is a good idea and like all HTML elements, you can customise them to look how you want.

Hope that helps! :grinning:

1 Like

Hey, thank you very much! :slight_smile:

1 Like