In this article, we will look at how to format a verbatim excerpt from any text, or in one word “quote”, in HTML, and look at the nuances of working with multi-directional text and East Asian characters.
In accordance with the current legislation of the Russian Federation, it is permitted without the consent of the author or other copyright holder and without payment of remuneration, but with the obligatory indication of the name of the author whose work is used and the source of borrowing: quoting in the original and in translation for scientific, polemical, critical or informational purposes is lawful published works to the extent justified by the purpose of citation, including the reproduction of excerpts from newspaper and magazine articles in the form of press reviews.
Quoting and quoting from a statement by an authoritative person, framed in the form of direct speech in informational, journalistic or analytical material, is a way to make the text objective, serious and more credible to the reader. Let's look at how short and long quotes are formatted using HTML.
(HTML Block Quotation Element ) is used to define a block quotation in a document (a long quotation within a document). The text inside this tag appears as an aligned block with left and right padding (40px by default).
</span> Example of using an element <blockquote><span>
Here is information from the Wikipedia website:
"https://ru.wikipedia.org/wiki/Pecunia_non_olet"> Money doesn't smell - a popular Latin expression. Words attributed to the Emperor Vespasian, allegedly spoken by him after receiving money from the tax on public latrines in Rome and addressed to his son Titus, who expressed displeasure about this.
Similar to the tag cite tag attribute indicates the URL of the resource from which the quote was taken. This attribute is not displayed to the user (its use is not visible). It can be used by search engines and for statistical purposes when running server-side scripts. It is allowed to specify as absolute addresses (for example: cite = "http://site/html/tag_blockquote.php" >
), and relative (for example: cite = "tag_blockquote.php" >.
Below is an example of how this is displayed in the browser:
Rice. 23a An example of using long quotes in HTML.
HTML title of the work
HTML tag (HTML Citation Element ) is intended to highlight the titles of works. It must include the title of the work or a link to the work (URL). By default, browsers display elements italics .
Usage example:
Example of using an element <cite><span><title>
</head>
<body>
<cite>
</span>"Woe from Wit"</cite>- comedy in verse by A. S. Griboedov. First show 1825<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><br>
<br>
</body>
</html>
<p>In the browser it looks like this:</p>
<h2>Text output direction</h2>
<p>Tag <bdo> (<i>HTML bidirectional override element</i>) is used to override the current text direction (sets the text output direction and is primarily intended for use with languages where reading occurs from right to left, such as Arabic).</p>
<p>Tag <bdo>used with the dir attribute and ltr (left-to-right), or rtl (right-to-left) values, specifying the direction of the text from left to right or right to left.</p>
<span><!DOCTYPE html>
<html>
<head>
<title>
</span> Example of using a tag <bdo><span>
dir = "ltr" > Text direction from left to right.
Text direction is from right to left.
Example result:
In HTML 5 tag isolates a piece of text that should be displayed in a different writing direction and allows browsers to handle bidirectional text correctly. This element is useful when displaying text with different directions of writing.
For example:
</span> Example of using a tag <bdi><span>
European race winners:
Participant No. 1
ماقسيم 99 points – 1st place
Participant No. 2
دميتري 97 points – 2nd place
Participant No. 3 John Connor 96 points – 3rd place
The result of our example:
Rice. 25 An example of the use of multidirectional languages.
Please note that browsers Internet Explorer And Edge do not support tag .
Nuances of East Asian symbols.
HTML contains elements , And
Hello friends!
I decided to write about the beautiful design of quotes in the text of articles on a blog running WordPress, since I was directly faced with the need for such work. I had to change the template on one of the sites. But, in fact, it is quite difficult. Despite the fact that there are now a huge number of paid and free templates, it is very difficult to choose one that meets all our requirements. There's bound to be something in the template that we don't like. Therefore, most often you have to choose a topic with the least number of shortcomings, and then refine it.
So, one of the shortcomings of the topic I chose was the inexpressive highlighting of the quote. It stood out only with an additional indentation on the left. I had to modify the CSS styles to make this text element more visible and beautiful.
I will give three reasons:
You show readers that this part of the text is a quotation. This is necessary to respect the copyright of the person you are quoting. On the other hand, linking to a reputable author also adds weight to your article.
Search engines “love” unique texts, and if the quotation is not formatted correctly, it will be counted as plagiarism, and the site’s ranking will be lowered and its position in the search will go down.
A special type of quotations makes the text more diverse and attractive in appearance. It's easier to read.
In order to highlight part of the text in a special way, you can use various methods.
Editing CSS Styles The first and most correct way to format a quote should be to use a tag blockquote and his styles. Although using CSS rules you can select any fragment (I wrote about this in the article), only the tag blockquote lets search engines know that this snippet is a quote and may not be unique.
It is this tag that is placed in the code if we use a button
But, as I already noted, the styles of this tag are not always the way we want. To edit them, you need to find the corresponding code in the file style.css and replace the rules specified for the tag blockquote , on your own.
This file can be edited in two ways:
Download it using an FTP client from the server to your computer, open it in , make changes and download again. File style.css located at wp-content/themes/your_theme/style.css .
You can use the built-in code editor in WordPress. To open it in the WP control panel, select Appearance – Editor . Unfortunately, this editor does not show line numbers, which makes searching difficult.
Before you make changes to the file style.css , edit the code using in the browser Google Chrome or similar in the browser Mozilla Firefox . Using these tools, you can immediately visually see what a quote will look like on your website.
Quote formatting examples Quote with quotation marks This symbol is considered generally accepted for indicating quotes, so it is used most often. Quotes can be inserted using a picture, which is more common, or you can do this by using a character code "\201C" , as shown in the example given.
Here is the image
And here is the corresponding code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
blockquote ( background: none repeat scroll 0 0 #fea; color: #009a82; font-family: Georgia,serif; font-size: 18px; font-style: italic; line-height: 1.45; padding: 1.25em 50px; position : relative; width: 750px; ) blockquote:before ( color: #009a82; content: "\201C"; display: block; font-size: 60px; left: 1px; position: absolute; top: 1px; )
blockquote ( background: none repeat scroll 0 0 #fea; color: #009a82; font-family: Georgia,serif; font-size: 18px; font-style: italic; line-height: 1.45; padding: 1.25em 50px; position : relative; width: 750px; ) blockquote:before ( color: #009a82; content: "\201C"; display: block; font-size: 60px; left: 1px; position: absolute; top: 1px; )
In this code in the second line #fea – background color, you can replace it with your own,
3rd line – font color,
4, 5, 6, 7 – font parameters,
8, 9 – fragment position,
10 – block width, it can be specified as a percentage, for example, 90%.
13 – color,
16 – size,
17-19 – position.
Box selection Here's an example:
And here is the simple CSS code for it:
1
2
3
4
5
6
7
blockquote ( color: #333; font-family: Verdana, Geneva, sans-serif; border: 1px dashed #999; background: #F8F4AB; padding: 10px 20px; )
blockquote ( color: #333; font-family: Verdana, Geneva, sans-serif; border: 1px dashed #999; background: #F8F4AB; padding: 10px 20px; )
If you are interested in the topic of designing quotes, I suggest downloading the mini-book. It examines in detail various examples of highlighting text fragments. After studying these examples, you can create your own design style.
WP-Note plugin for designing text fragments on a blog This plugin allows you to easily and simply format article fragments. But it should immediately be noted that for search engines these fragments will not be considered quotes, since they do not use the tag blockquote . The plugin is used only for external design, and not for highlighting quotes.
By default, the plugin settings have five design options. In order to apply them, you do not need to change any code; you just need to enter the appropriate tags at the beginning and end of the fragment directly in the visual editor.
WP-Note plugin tags Editing a plugin If you don't like the default design options or they don't harmonize with your site's design, you can change them. But for this you will have to make changes to the style file. You can find it at wp-content/plugins/wp-note/style.css.
You can also use the built-in WordPress editor. To do this, select in the control panel Plugins – Editor , then find Wp-note in the drop-down list on the right and click the button Choose , a list of all plugin files will appear.
I hope I explained everything well enough and now you understand how to format quotes on the site. Don't forget to share the article on social networks.
See you soon!
Blindly following the recommendations brings benefits with about the same probability that a blonde can meet a dinosaur - 50/50, either she will or not. In order not to meet a dinosaur, you need to turn on your brain even when, it would seem, everything is outlined point by point. A professional differs from a lamer in that the words “it says in the instructions
"answers with a question" why exactly?
For example, use instead of it’s not necessary at all because “Yandex likes it this way more
" Tag in markup semantics means exactly bold –
bold font style. But – this is a semantic emphasis, the tag tells the robot that the author wanted to emphasize something important.
Or simple tags like this:
AND
Enclosing a piece of text in tags forms a logical unit of text - a paragraph. In the text, the end of a paragraph looks like a line break (pressing Enter) - the next paragraph begins on a new line. Tag But from the outside, the result of both tags may look the same . An experienced SEO specialist understands what this is all about - keywords within one paragraph are considered together, and the separation between two paragraphs breaks the connection between them.
The difference between tags can be seen very clearly in your favorite Word:
And by the way, this can be used. To complete a paragraph, you press Enter. To break a line, press Shift+Enter.
About one spell... sorry, one interesting tag will be discussed in this article.
This tag allows you to insert borrowed text with an indication of the source. This way you can use other people's words without consequences for assessing uniqueness and add authority to the text.
The semantic core determines not the characteristics, but the semantic meaning of the text. When selecting keywords, it is important to think not only about relevance, but also about the technical ability of the search engine to classify the text into a particular group of documents based on its semantic meaning.
Semantics is not only the units of language in linguistics, but also the meaning of constructions in programming. This is much more important from an SEO point of view, because search engines are programs that work in full accordance with the implemented algorithms.
For example: The semantics of an HTML document is determined by the meaning and hierarchy of its elements. Yes, tag defines the data area of an HTML document consisting of a description (tag
) and content (tag ) document. Remove tag , and the semantics of the document will be violated.
Link ranking still plays an important role in website promotion, but its importance lies precisely in the plane of citation, misunderstanding of which has led to sanctions from search engines.
Citation index (or IC) is a measure adopted in the scientific world “ importance » works of any scientist. The index value is determined number of links for this work (or surname) in other sources.
There are other options for determining the semantic meaning (semantics) of a quote, where tags may appear (grouping of elements) and (description for FIGURE), micro-markup and so on, but here it is easy to make a fatal mistake that will violate the semantics and lead to unpredictable consequences of interpretation.
Let's sum it up
It is important for copywriters and SEO specialists not only to blindly follow the advice for webmasters, but also to understand the essence of the proposed solutions defined by the specifications.
Semantics is not only units of language in linguistics, but also the meaning of constructions in programming, which is much more important in the context of website promotion in search engines, which are programs.
Link ranking is tightly tied to the semantic meaning of the citation.
New in HTML5 is the expansion of the semantic component of the HTML document in general and the tag in particular - use a generator of the correct HTML code for citations.
