HTML Quotes | HTML Quotation Marks

What are the HTML quotes? How to use the HTML quotes?

Html quotes are used to present data in quotes. They are of different kinds in different languages and by default they are treated differently in various browsers. To use the quotes properly and efficiently you have to use CSS. In the code below we are going to show you some of the html quotes in different languages.

HTML Code with Example:

<!DOCTYPE html>

<html lang='en'>

<head>

<meta charset="UTF-8" />

<title>

HTML Quotes | howtocode.pk

</title>

<style>

:lang(en) > q { quotes: '“' '”' '‘' '’'; }

:lang(en-GB) > q { quotes: '‘' '’' '“' '”'; }

:lang(fr) > q { quotes: '«' '»' '“' '”'; }

:lang(de) > q { quotes: '„' '“' '‚' '‘'; }

</style>

</head>

<body>

<h3>

HTML Quotes | howtocode.pk

</h3>

<p lang=”en”>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis

porta nunc. <q>Aliquam quis <q>nulla</q> turpis.</q> Nam tincidunt nunc hendrerit

ligula aliquet vel feugiat diam pharetra.

</p>

<blockquote>

Aliquam posuere nulla quis enim sodales congue. Vivamus tortor mauris,

feugiat semper vehicula non, blandit sed mi. Proin sed urna eu nunc

convallis aliquam.

</blockquote>

</body>

</html>

Output:

HTML Quotes | howtocode.pk

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis porta nunc. “Aliquam quis ‘nulla’ turpis”. Nam tincidunt nunc hendrerit ligula aliquet vel feugiat diam pharetra.

Aliquam posuere nulla quis enim sodales congue. Vivamus tortor mauris, feugiat semper vehicula non, blandit sed mi. Proin sed urna eu nunc convallis aliquam.

You can see the output of the above code we have used the <q> tag for quotes. In the paragraph we have used the <q> tag in between a <q> tag. It is an inline tag. The outer <q> tag has double quotes and the inner one has the single quotes.

We have specified the styles for some language attributes. In the first line of CSS code we are defining the quote style for English language. In the second style we are declaring styles for the English of Great Brittan. In the next lines we are declaring the styles for the French and German languages. In the styles you can see that the first two quotes are for the outer quotes and the second ones are for the inner quotes.

In the paragraph tag you can specify the language and the quotes will be displayed according to that language.

After the <p> paragraph we have < blockquote > tag which is a block level element. It displays the text a bit indented from both sides in most browsers. You can change the appearance with the help of CSS as you wish.

Comments