HTML Marking up computer code and Quotes

HTML Marking up computer code and Quotes
Nikhil
Published on 2021-07-02 06:15:09

Block with <pre> and <code>


If the formatting (white space, new lines, indentation) of the code matters, use the pre element in combination with the code element:

<!DOCTYPE html>
<html>

<head>
    <title>HTML tutorialhub</title>
</head>

<body>
    <pre>
<code>
x = 42
if x == 42:
print "x is … … 42"
</code>
</pre>
</body>

</html>

You still have to escape characters with special meaning in HTML (like < with &lt;), so for displaying a block of HTML code (<p>This is a paragraph.</p>), it could look like this:

<!DOCTYPE html>
<html>

<head>
    <title>HTML tutorialhub</title>
</head>

<body>
    <pre>
<code>
&lt;p>This is a paragraph.&lt;/p>
</code>
</pre>
</body>

</html>

 

Inline with <code>


If a sentence contains computer code (for example, the name of an HTML element), use the code element to mark it up:

<p>The <code>a</code> element creates a hyperlink.</p>

 

Marking-up Quotes

Inline with <q>


The q element can be used for a quote that is part of a sentence:

<p>She wrote <q>The answer is 42.</q> and everyone agreed.</p>

 

Quotation marks


Version ≤ 4.01

Quotation marks should not be added. User agents should (in HTML 4.01) resp. must (in HTML 4.0) render them automatically.

Version = 5

Quotation marks must not be added. User agents will render them automatically.

 

Source URL (cite attribute)


The cite attribute can be used to reference the URL of the quoted source:

<p>She wrote <q cite="http://example.com/blog/hello-world">The answer is 42.</q> and everyone agreed.</p>

Note that browsers typically don’t show this URL, so if the source is relevant, you should add a hyperlink (an element) in addition.

 

Block with <blockquote>


The blockquote element can be used for a (block-level) quote:

<!DOCTYPE html>
<html>

<head>
    <title>HTML tutorialhub</title>
</head>

<body>
    <blockquote>
        <p>The answer is 42.</p>
    </blockquote>
</body>

</html>

 

Source URL (cite attribute)


The cite attribute can be used to reference the URL of the quoted source:

<!DOCTYPE html>
<html>

<head>
    <title>HTML tutorialhub</title>
</head>

<body>
    <blockquote cite="http://atutorialhub.com/">
        <p>The answer is 42.</p>
    </blockquote>
</body>

</html>

Note that browsers typically don’t show this URL, so if the source is relevant, you should add a hyperlink (a element) in addition (see the section Citation/Attribution about where to place this link).

Citation/Attribution


Version ≤ 4.01

The citation/attribution should not be part of the blockquote element:

<blockquote cite="http://example.com/blog/hello-world">
<p>The answer is 42.</p>
</blockquote>

<p>Source: <cite><a href="http://example.com/blog/hello-world" rel="external">Hello World</a></cite></p>

You can add a div element to group the quote and the citation, but it exists no way to associate them semantically.

The cite element can be used for the reference of the quoted source (but not for the author name).

Version = 5

The citation/attribution (e.g., the hyperlink giving the source URL) can be inside the blockquote, but in that case it must be within a cite element (for in-text attributions) or a footer element:

<!DOCTYPE html>
<html>

<head>
    <title>HTML tutorialhub</title>
</head>

<body>
    <blockquote cite="http://example.com/blog/hello-world">
        <p>The answer is 42.</p>
        <footer>
            <p>Source: <cite><a href="http://example.com/blog/hello-world" rel="external">Hello World</a></cite></p>
        </footer>
    </blockquote>
</body>

</html>

The cite element can be used for the reference of the quoted source, or for the name of the quote’s author.

ATutorialHub Related Guide

HTML Tutorials Comments (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website