HTML5 Simple Text Marking

Hungarian version

Got an idea from You that would be good to deal with the text marking a little bit. So I thought we should see some examples for the innovations and for the text marking aswell.

Let’s see the things we should know about according to the texts. Starting with the basics our texts should take into paragraph with the <p> element. Long ago there was an attribute called “align” but it was disused in HTML4 too neither HTML5 support this. Its use is very simple:

<p>It is a new paragraph</p>

The next is the <q> element which serves to insert short cites in. Some of the browsers show this between apostrophe. It has only one attribute. With its help we can mark the source where we cite from.
For this purpose we can use the <blockquote> element too. We can show longer cites with this but i recommend the use of the <q> element because in the case of the latter the browers running new paragraphs pell-mell. Its use the same as the element of <q>:

<q cite="http://www.magyarorszag.hu/">https://html5.ugyesen.com/ - HTML5 webportal</q>

We can use the <br> element in the case of line breaking. Generally we are using as a simple element. Let’s see an example for this:

<br /> it is a line break.

With the help of the <h1> <h2>.. <h6> elements we can address our texts. In descending order <h1> is the biggest <h6> is the smallest address text.


<!DOCTYPE html>
 <html>
 <head>
 <meta charset=utf-8 />
 <title>HTML5 h1-h6 tutorial</title>
 </head>
 <body>

<h1>1. address</h1>

<h2>2. address</h2>

<h3>3. address</h3>

<h4>4. address</h4>

<h5>5. address</h5>

<h6>6. address</h6>
 </body>
 </html>

You can watch it here.

Let’s see what helps to feature our writed texts. Starting with the <mark> which is quite useable to text featuring. It was not findable in HTML4. Practically it serves to feature a portion of the text but it is a good tool to feature the relevance too. Its use is not hard basically we can write the text between the two tags what we would feature. example.:<mark> test </mark>

Let’s see a realistic example for this:


<!DOCTYPE html>
 <html>
 <head>
 <meta content="hu" http-equiv="Content-Language">
 <meta charset=utf-8 />
 <title>Marked text</title>
 </head>

<body>

<p>A <mark>html5</mark>.ugyesen.com is a <mark>HTML5</mark> page presenting a language.</p>

</body>
 </html>

You can watch the example here:

As You can see in our examples it is really useful to mark relevant text portions in an article. In the following let’s see the elements of <ins> and <del> which would be familiar to us.
They can be used in pair. First the <del> after this the text to be replaced then the <ins> to insert the new one.

Attributes:

cite – its value is an URL which refers to the cause of the delete or insert.

datetime (dd/mm/yyyy) It shows the punctual date of the delete or insert.

Let’s see a simple example. By the delete refering the cause of the delete and by the insert we are going to insert the punctual date in.

<html>
<head>
<meta content="en" http-equiv="Content-Language">
<meta charset=utf-8 />
<title>HTML ins del tutorial</title>
</head>

<body>

<p>A html5.ugyesen.com is a <del cite="https://html5.ugyesen.com/teszt.html">HTML4</del> <ins datetime="2012-03-30 00:00Z">HTML5</ins> page presenting a language.</p>

</body>
</html>

The example can be available here.

Things we should know about relating to the texts.

Source:

http://www.w3.org/TR/html5/the-ins-element.html#the-ins-element

http://www.w3.org/TR/html5/the-del-element.html#the-del-element

Creative Commons Licenc
HTML5 Simple Text Marking  a Creative Commons Nevezd meg! – Ne add el! – Így add tovább! 2.5 Magyarország Licenc alatt van.

Permissions beyond the scope of this license may be available at https://html5.ugyesen.com.

You may also like...