Tags for this article: basics, elements, embedding, html, inline, tutorial
Elements are the building blocks of any HTML page. Without elements no HTML page can be designed. Paragraphs, hyperlinks, sounds, images, embedded media, lists, font, headings and many others are the elements of HTML which help us to define the structure and appearance of the actual content to be displayed on the web page. All the elements can be classified either as Block level elements or as Inline elements/Text level elements/Phrase elements. In this article we will turn our heads towards the nitty-gritty of Inline Elements.
Inline elements are of two types: Presentational elements and Structural elements. The presentational tags define the actual appearance and design of the text. These tags describe how the text will look in the browser. On the other hand, structural tags are meant to define the structural markup of the text. Below are the some examples of both the Presentational as well as structural elements.
Presentational Elements:
1) <i>…</i> It displays the text in italics.
2) <b>…</b> It displays the text in bold
3) <u>…</u> It underlines the text
Structural Elements:
1) <em>…</em> Tells the browser to emphasize the selected text
2) <strong>…</strong> Tells the browser to strongly emphasize the selected text
3) <code>…</code> Tells the browser that the selected text is a computer code
Structural elements basically define the text functions on the web page rather than representing the appearance of the text. The way in which text will be displayed is up to the web browser. Thus, the structural elements are platform independent. This is in contrast to the Presentational elements as they actually influence the appearance and visual style of the text.
Inline elements are meant to format small chunks of data/text. All the inline elements are nested within the block elements. Below is a list of some of the frequently used inline elements:
1. a – Anchor, used to create a link to another page in HTML.
2. abbr - Represents an abbreviation.
3. acronym - Denotes an acronym.
4. b – Makes the text bold
5. br – Break, it is similar to a carriage return
6. code - Denotes computer program code.
7. dfn - Denotes a definition.
8. font – Used with various attributes to change font color, size, face etc.
9. i – Change the text into italics
10. img - Allows placement of a graphical image in the page.
11. input - Form input
12. kbd - Denotes information typed from the keyboard.
13. param - Used to add additional parameters to the object.
14. q - Used for short quotations
15. s - Strike through text
16. samp - Denotes a sample.
17. span - Used to set special style to specific areas of the page.
18. strike - Sets text to have a line struck through it.
19. strong - Denotes strong emphasis which is basically bold
20. sub - Subscript
21. sup - Superscript
22. textarea - A form for multi line text input.
23. tt - Sets text style to monospaced teletype
24. u – Underlines the text
25. var - Denotes a variable in a program.