HTML elements are the building blocks of HTML pages. Images and other objects such as interactive forms may be embedded into the rendered page with HTML constructs. HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes, and other items
HTML Text Formatting:
HTML provides us with several tags to help format text, <b> for bold, <i> for italic,<u> for underlining, etc. These tags are divided into two categories:
Physical Tags: These tags are presentational. They don’t add extra meaning to the text.
Semantic Tags: These tags add some special meaning to the text along with adding style to the text.
HTML Text Formatting Tags:
Many tags are used to edit and change the font style of the text. They are:
- Bold tag
- Italic tag
- Underline tag
- Mark tag
- Strike tag
- Monospace tag
- Subscript tag
- Superscript tag
- Delete and Insert tag
- Big and Small tag
Bold Tag:
Bold texts are used to highlight words that are important. They are also used to write titles and headings in articles. In HTML we have <b> and <strong> tags to write bold texts.
<b> tag – It does not hold any extra importance other than making text bold.
<strong> tag-Other than making text bold <strong> tag have semantic importance and it is used to give extra stress and emphasize important words.
<b> and <strong> tags are used to write in bold font. <b> and <strong> tags are nonvoid elements so they must have a closing tag.
Italic Tag:
Italics font is used to emphasize titles of articles, stories, poems, etc. In HTML, we can italicize our text using <i> and <em> tags.
<i> tag – This tag is just used to write text in italic font, it does not hold any special meaning.
<em> tag – It is used to emphasize the text. Screen readers put extra verbal stress while reading the text in <em> tags. <em> tag was intoduced in HTML5.
<i> and <em> tags are used to write in italic font.
<i> and <em> tags are nonvoid elements therefore they must have a closing tag.
Underline Tag:
Underline tags are used on important words which require the attention of readers or can be used to underline headings or subheadings. It is used to underline a word.
<u> tag is a non-void element therefore it must have a closing tag.
Mark Tag:
This tag is relatively a new tag that was introduced in HTML5. It is used to highlight a word in a sentence. Mark tag highlights the words by giving them a yellow background. It is supported by all major browsers. A Mark tag is used to highlight a word.
<mark> tag is a non-void element therefore it must have a closing tag.
Strike Tag:
<strike> tag is used to put a horizontal line through words. It can be used in articles to show that some items are deleted or updated from a list or article.
In HTML5 <s> tag is used to write striked text. It is used when a word is no longer relevant or required in an article. We should not use <s> tag to represent deleted text <del> tag must be used in that case.
Monospace Text:
This tag is used to display text as it would display on fixed-width displays such as line printers, teletype, etc. The browser renders the text enclosed in <tt> tags in monospace font. It is no longer supported in HTML5. Instead of <tt> tag we can use <code>, <pre>, <kbd>, <var>, <samp> or CSS.
Subscript Tag:
A Subscript is a letter, symbol, or number which is usually in a smaller font size and half a character below the normal line. Subscript tags are used to write chemical formulas. This tag is used to write the subscripts.
<sub> tag is a non-void element therefore it must have a closing tag.
Superscript Tag:
A Superscript is a number, letter, or symbol which is usually in smaller font size and half a character above the normal line. Superscript tags are used to write mathematical equations. This tag is used to write superscripts.
<sup> tag is a non-void element therefore it must have a closing tag.
Delete And Insert Tag:
When we have to update something in our article we use delete and insert tags.A delete tag is used for text which is no longer required or has to be deleted. Browsers render deleted text as strike-through text. While <ins> tag is used to insert updated or new text in the article. Text enclosed by <ins> tag is rendered as underlined text by browsers.
Delete and insert tags are used to add and remove words.
<del> and <ins> tags are nonvoid elements therefore they must have a closing tag.
HTML Images:
HTML images are used to embed images in HTML. Images are very important to beautify as well as to depict many complex concepts in a simple way on your web page. The HTML <img> tag embeds an image within the HTML web page.
Here, the <img> tag inserts the image logo.png on the webpage.
The HTML image tag has 2 important attributes:
- The src attribute
- The alt attribute
Src Attribute:
The src attribute is a required attribute for the <img> tag. It specifies the path (URL) to the image. It tells the browser where to look for the image.
For example: <img src=”tictactoe.png” >
Alt Attribute:
The required alt attribute provides an alternate text for an image if the user for some reason cannot view it (because of a slow connection, an error in the src attribute, or if the user uses a screen reader).
For Example: <img src=”img_chania.jpg” alt=”Flowers in Chania”>
HTML Background Colors:
Coloring a webpage background is actually pretty simple. The first and most popular way is by using a Hex color code with the background-color property. Here we apply a Hex color directly on the HTML <body> element using the style attribute
HEX color codes may be the most popular, but they are just one of many methods available to color an HTML element. A second way is to use an HTML color name; simply replace the HEX code with one of the 140 supported color names and you’re good to go.
RGB values can also be used to add a background color to HTML elements. Using the same style attribute as before, replace the HEX code or color name with a properly formatted RGB value (be sure to enclose it in parentheses and prefix it with a lowercase ‘rgb’). When using RGB values in HTML you have the additional option of specifying the level of opacity. With the prefix rgba() – the ‘a’ stands for alpha, the channel that controls transparency – you can insert a fourth value between 0 and 1, 0 for fully transparent and 1 for totally opaque (use decimal values for levels in between)
For Example: <body style=”background-color:rgba(255,0,0,0.5);”> </body>
You Might Also Interested In Reading, HTML: An Introduction To HyperText Language
