HTML Text

HTML/HTML Text

When creating a web page, you add tags (known as markup) to the contents of the page. These tags provide extra meaning and allow browsers to show users the appropriate structure for the page. In this tutorial, we will focus on how to add a markup to the text that appears on your pages. You will learn about:

2) Paragraphs

To create a paragraph, surround the words that make up the paragraph with an opening tag and closing tag. By default, a browser will show each paragraph on a new line with some space between it and any subsequent paragraphs.

<p>

Hypertext Markup Language is a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages.

 </p>

 

<p> CSS stands for Cascading Style Sheets CSS describes how HTML elements are to be displayed on the screen, on paper, or in other media </p>

 

 

The result of the above code is:

3) Bold and Italic

By enclosing words in the tags and we can make them appear bold. The elements also represent the text section that would be represented in visually different ways. For example, keywords in a paragraph although the use of the element does not imply any additional meaning

<p> This is how we make a word appear paragraph or others <b> bold.</b> </p>

<p> Inside a content description you might see some <b> key features in bold.</b></p>

 

The result of the above code is:

 

By enclosing words in the tags and we can make characters appear italic. The element also represents a section of text that would be said in a different way from 

surrounding content such as technical terms, names of ships, foreign words, thoughts, or other terms that would usually be italicized.

<p> This is how we make a word appear paragraph or others <i> italic.</i> </p>

 

<p> Inside a content description you might see some <i> key features in italic.</i></p>

 

The result of the above code is:

 

4) Superscript and Subscript

The <sup> element is used to contain characters that should be superscripts such as the suffixes of dates or mathematical concepts.

The <sub> elements are used to contain characters that should be subscript. It is a commonly used footnote or chemical formula. 

<p>On the 4^th of September you will learn about E=MC².</p>

        <p>The amount of CO₂ in the atmosphere grew by 2ppm in 2018₁.</p>

 

The result of the above code is:

5) White Space

To make code easier to read, web page authors often add extra spaces or start some elements on new lines. When the browser comes across two or more spaces next to each other, it only displays one space. Similarly, if it comes across a line break, it treats that as a single space too. This is known as white space collapsing. You will often see that web page authors take advantage of white space collapsing to indent their code to make it easier to follow.

        <p>The Sun is move away from Earth. </p>

        <p>The  Sun is move       away from Earth.</p>

        <p>The  Sun is          move       away from Earth.</p>  

 

The result of the above code is:

6) Line Breaks and Horizontal Rules

As you have already seen, the browser will automatically show each new paragraph or heading on a new line. But if you wanted to add a line break inside 

In the middle of a paragraph, you can use the line break tag.

 <p> Hello <br/> World!! </p>

 

The result of the above code is:

<hr /> tags

To create a break between themes — such as a change of topic in a book or a new scene in a play — you can add a horizontal rule between sections using the <hr />. There are a few elements that do not have any words between an opening and closing tag. They are known as empty elements and they are written differently. An empty element usually has only one tag. Before the closing angled bracket of an empty element, there will often be a space and a forward slash character. Some web page authors miss this, but it is a good habit.

<p>Venus is the only planet that rotates clockwise. </p> <hr />

<p>Jupiter is bigger than all the other planets combined. </p>

The result of the above code is:

Semantic Markup:

Some text elements are not intended to affect the structure of your web pages, but they do add extra information to the pages — they are known as semantic markup.

The <em> element allows you to indicate where the emphasis should be placed on selected words and the <blockquote> element indicates that a block of text is a quotation. The reason for using these elements is that other programs, such as screen readers or search engines, can use this extra information.

For example, the voice of the screen reader may add emphasis to the words inside the <em> element, or a search engine might register that your page features a quote if you use the<blockquote> element.

7) Strong and Emphasis

The use of the <strong> element indicates that its content has strong importance. For example, the words contained in this element might be said with strong emphasis. By default, browsers will show the contents of an element in bold.

<p><strong>Beware:<strong> This area is Danger. </p>

 

The result of the above code is:

The use of the <em> element indicates emphasis that subtly changes the meaning of a sentence. By default, browsers will show the contents of an element in italic.

<p>I <em> think </em> It was the first. </p>

The result of the above code is:

8) Quotations

There are two elements commonly used for marking up quotations:

The <blockquote> element is used for longer quotes that take up an entire paragraph. Note how the element is still used inside the element. Browsers tend to indent the contents of the element; however, you should not use this element just to indent a piece of text — rather you should achieve this effect using CSS.

The <q> element is used for shorter quotes that sit within a paragraph. Browsers are supposed to put quotes around the element; however, Internet Explorer does not support therefore many people avoid using the element.

Both elements may use the cite attribute to indicate where the quote is from. Its value should be a URL that will have more information about the source of the quotation.

<blockquote cite="https://google.com">

            <p>Did you ever stop to think, and forget to start again? </p>

</blockquote>

<p>As A.A. Milne said, <q>Some people talk to animals. Not many listen though. That's the problem. </q></p>

The result of the above code is:

9) Abbreviation and Acronyms

If you use an abbreviation or an acronym, then the <abbr> element can be used. A title attribute on the opening tag is used to specify the full term.

In HTML 4 there was a separate <acronym element for acronyms. To spell out the full form of the acronym, the title attribute was used (as with the element above). HTML5 just uses the element for both abbreviations and acronyms.

<p><abbr title="Mr">Mr</abbr> Mohammed Ali is a theoretical heavyweight boxer champion. </p>

<p> <acronym title="Hello">World</acronym> do some crazy space stuff. </p>

 The result of the above code is:

Summary of HTML Text

• HTML elements are used to describe the structure of the page (e.g. headings, subheadings, paragraphs).
• They also provide semantic information (e.g. where emphasis should be placed, the definition of any acronyms used, when given text is a quotation).