Other elements for text in HTML

Coding (Html5)

Apr 4, 2017

How to Include more and special text in your html file
 
/img/blog/other-elements-for-text-in-html.jpg

 

In some  conttext can be useful to include quotes from famous phrases, superscript and subscript, use of acronyms and abbreviations, source code or demarcate some words. 

Let's examine the HTML elements used to work on the texts.

 

 

blockquote

 

 

According to the HTML5 specification <blockquote> is an element that hosts content cited by other sources.

They could be comments of other users in a blog. 

 

 

 

 

 

<Blockquote>

     <P> [...] were not born to live as brutes, but to follow virtue and knowledge </ p>

     <Cite> Inferno Canto XXVI - The Divine Comedy </ cite>

</ Blockquote>

 

 



It is a type of block element and in basic representation of the browser, the block is separated from the rest of the text with a margin on the right and left.

 

 

In practice, this tag is often used (even loosely) to define the notes in the text.

 

 

cite

 

 

the <cite> is used to bear the name of a work of genius, such as the title of a book, a movie or a song from which he is a quote, or even the name of an author or character who coined a phrase.

 

 

It is an inline element and the base appears in italics.

 

 

 

 

 

q

 

 

If we want to insert citations directly within a text, we can use the <q>, an inline element that you can use to specify a phrase taken from a work lettaria or from a source without having to dedicate a separate block.

 

 

 

 

 

<p>

     <cite>Pulp Fiction, 1994</cite>: "<q>They call it a Royale with cheese.</q>".

</p>

 

 

 

 

 

abbr

 

 

 

 

This tag is used both for abbreviations such as "Mr", "Mrs.", Both for abbreviations as CSS or FIFA. In any case, we use it when we write the short version of a phrase or a word.

 

 

We can add the long version or the definition of Acronym through the title attribute.

 

 

 

 

 

<p> In this guide we explore the <abbr title = "HyperText Markup Language"> HTML </ abbr>

and we will explore the tags and expressive potential. </p>

 

 

 

 

 

This is an inline element and its default representation typically displays a tooltip on mouse over, which brings its own with the full text associated with the element.

 

 



When it is not shortened but to give a definition of a word, such as a technical word, we can use <dfn>.

 

 

 

 

 

<dfn title = "Set of software components, which makes operating computers, devices and computing devices"> Operating System </ dfn>

 

 

 

 

 

The basic representation is similar to that of abbr and also in this case is provided for the tooltip that contains the explanation.

 

 

 

 

 

superscript and subscript

 

 

Insert a superscript or subscript is something that has to do with the printer or with the look?

 

 

We are not even half way too, we think the use of subscripts, for example, to enter the numbers on math variables, it is something that is closely related to the content.

 

 

 

 

 

sup

 

 

The tags we use are <sup> for the quotes and <sub> for the subscripts.

 

 

They are both inline elements and the default representation on the browser is what we expect, shrunken character and placed higher or lower depending on whether it is a superscript or a subscript.

Here is a famous example:

 

 

E = mc <sup> 2 </ sup>

 

 

sub

 

 

If we want to represent a variable, the famous 'x' of the school we can use the <var>:

 

 

<var> x <sub> i </sub> </var>

 

 

 

 

 

pre

 

 

Within the <pre> We can write text songs that follow the same format that we set in the editor, a text "pre-formatted" note.

 

 

In other words if within the <pre> and on the editor is wrapped or insert many spaces between one word and another, oblige the browser to do the same.

 

 

It must be said that this tag to force a bit 'hand on the appearance issue and typically its content is displayed as an "monospaced" font (all the letters have the same width).


 

 

 
 
If you like this content and you are hungry for some more join the Facebook's community in which we share info and news just like this one!
 

Other posts that might interest you

Coding (Html5) Jan 14, 2018

The list in HTML

See details
Coding (Html5) Jan 14, 2018

The table

See details
Coding (Html5) Jan 14, 2018

Hyperlinks tags

See details
Get my free books' review to improve your skill now!
I don't want to improve