Block-level elements occupy the entire line width, but inline level HTML elements do not occupy a line width. They rather stay in-line with other elements.
These inline HTML elements usually appear within a line of text. They do not begin on a new line and does not occupy the entire line width. They can be included in a block of block-level HTML elements.
Some of these elements include:
<a>, <abbr>, <b>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <object>, <output>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>.
Break-Down of Inline Level HTML Elements
In this tutorial, we broke down the inline level elements into different groups to enhance our understanding and how to use them. The groupings include text layout inline level html elements, link & citation elements, text identification inline level html elements, text manipulation inline level html elements and the embed inline level html elements.
Text Layout Inline Elements
The elements we classified under text layout are inline level html elements that we can use to place texts where we want them with the help of CSS codes or inbuilt html feature. Some these elements are <br> <span> <q> <samp> <data>.
The Line Break Element <br>
This element is used to create line breaks or carriage returns in a continuous text flow. A line break is like pressing the enter key on the keyboard while typing.
Attributes
It can take on global attributes.
Example
See the Pen Line Break <br> by KmacIMS (@kmacims) on CodePen.
The Span Element <span>
The <span> element works like a div element. It is used to group in-line elements together for styling purpose. It does not produce any visual effect on texts but does, when styling is applied.
Attributes
Use global attributes
Example
See the Pen Span Element by KmacIMS (@kmacims) on CodePen.
The Data Element <data>
The data element is used to define contents that can be linked to machine readable output.
For example, I might want to make a list of products available for users to see using the product name, but will also want to use a scripting language like JS to process such products when accessed. Then I will use the <data> element. In this case, the content of the <data> element will be made available to users while the machine will process the data using the value in the value attribute.
Attributes
Thus, the data element takes on global attributes and the value attribute.
Example
See the Pen Data Element by KmacIMS (@kmacims) on CodePen.
The enlisted products will be easily understood by users while machine will process the information using the values specified in the value attribute.
The Short Quotation Element <q>
This element is used to mark short quotations in a document. When a quotation is a section of another document, use <blockquote>, but use <q> to mark off short quotes, using quotation mark.
Attributes
Use global attributes, and cite to specify the source of the quote.
Example
See the Pen Short Quote by KmacIMS (@kmacims) on CodePen.
The sample Output Element <samp>
When writing an article that is related to a computer program, it is always relevant to show a computer output example. To achieve this, we use the <samp> element. This element will display the computer sample output using the browsers default monospace font, e.g. courier.
Attributes
Use the global attributes.
Example
See the Pen Sample Element by KmacIMS (@kmacims) on CodePen.
Link and Citation Elements
In this section, we will discuss the anchor element and other few elements that you may need while creating your websites.
The Anchor Element <a>
This element is used to create a hyperlink to other web pages, or heading locations within the same document.
If you can remember when we worked with the <nav> element, you will notice that we were including the <a> element while defining the navigation items.
The <a> element can be used anywhere in a webpage to create a link within or outside the same web page.
Attributes
The element can accept global attributes;
- Href: This is a URL that the hyperlink points to. It can also be a URL fragment. A URL fragment is a name containing a hash, e.g. #introduction; used for internal target location.
- Download: This attribute permits a URL to be downloaded rather than navigated;
- Hreflang: Used to specify the human-readable language of the linked resource.
- Target: used to specify where to display the target URL.
Target has the following values:
_self (loads URL in the same browsing context),
_blank (loads URL in another tab or different browsing context),
_parent (loads URL in parent browsing context. The same as _self if a parent does not exist), and
_top (load URL into the top-level browsing context. The same as _self if a parent does not exist).
- Type: specifies a media type).
- Others include: ping, referrerpolicy and rel
Example
Refer back to block-level elements under page layout elements to understand how the nav anchors were created.
Here, we will create:
- A simple hyperlink text linking to a particular URL
- Two navigation links linking to a different page on the same website.
- An anchor element linking to a different section on the same webpage.
We will work with our previous codes combined on one page. Let’s call the page Sample. In the second page will be called Fragment. Here we’ll place our present codes. Let’s begin.
- Creating a simple hyperlink to a particular url:
Enter the following codes:
See the Pen HyperText by KmacIMS (@kmacims) on CodePen.
The hyperlink text is identified by the blue colored text. Click on it to go to the specified url in new tab.
- Creating two navigation links:
Firstly, create a new folder and make sure that you will save the two files: Sample.html, and Fragment.html in the same folder location.
Secondly, create the two files: Sample.html, and Fragment.html.
Thirdly, in Sample.html, enter the following codes: (NB: Don’t bother styling it).
<section>
<nav>
<ul>
<li><a href=”Fragment.html”>Fragment</a></li>
<li><a href=”Sample.html”>Sample</a></li>
</ul>
</nav>
</section>
Then, copy and paste the Hyperlink code created above inside Fragment.html and save the two files. Run and Sample.html in a browser. From their you can click the links to preview and Fragment.html.
- Creating anchor text on the same page: You can use this method to create a one-page website.
- Copy all the previous codes in this module into the html file, and all the last two codes into Fragment.html
- Now, create 3 more navigation items within the <nav> element. (NB: you may decide to create another section if you want). Name them: Products, Quotation, and Sample Element respectively.
- In the href attribute of each, enter the following values: #products, #quotation, and #sampleE, respectively
- Locate the beginning of each of these items and create an id attribute with the names: products, quotation, and sample respectively. See the complete code below.
Codes in the Fragment.html file
See the Pen Codes in Fragment.html by KmacIMS (@kmacims) on CodePen.
Codes in the Sample.html file
See the Pen Codes in Sample.html by KmacIMS (@kmacims) on CodePen.
The Abbreviation Element <abbr>
This element is used to provide the meaning of an acronym or abbreviation in a webpage. The element is usually used together with the title attribute to provide a description of the abbreviation.
It actually helps to hide contents from immediate eyes of users. Those who wish to know the content can always point at the content of the <abbr> element.
Attributes
This element supports the global attributes. We usually use the title attribute along with it because it provides a specific meaning to the element.
Examples
See the Pen Abbr element by KmacIMS (@kmacims) on CodePen.
The Citation Element <cite>
This element is usually used alongside the blockquote element to provide a reference to the quoted work or material. It should include all or any of the author’s name, book title, and url.
Attributes
It takes on global attributes.
Example
See the Pen Cite Element by KmacIMS (@kmacims) on CodePen.
The Definition Element <dfn>
The definition element is used to identify a defining instance of a term in HTML document. It is used to tell browsers and search engines that the surrounded text is a defining term. NB: The definition of the term enclosed with the <dfn> element should come immediately after the term.
Attributes
It uses the global attributes. You can use the title attribute. When the title attribute is used, then its value becomes the exact term being defined.
Example
When using the definition element, you can use it without the title attribute, or with the title attribute, or even with the <abbr> element enclosed within.
See the Pen Definition Element by KmacIMS (@kmacims) on CodePen.
Text Identification Elements
Elements grouped under this section are elements you can use to draw attention to specific texts in your HTML document. When creating a document, some items may be worth emphasizing on to convey a certain level of importance to readers and user agents (browsers and web crawlers). Some of the elements used to achieve this purpose include: <b> <em> <strong> <mark> <code> <kbd>.
The Attention or Bold Element <b>
This element is used to bring attention to a text or to simply add a boldface character to texts, by darkening the texts within the element.
This element does not convey semantic information. If words enclosed convey a special meaning, it is recommended to use the <strong> element, else the CSS font-weight property should be used to bring attention to relevant texts, rather than the <b> element.
Because the <b> element does not convey any semantic information, it is advised that a class attribute be used alongside the element to add semantic information to the text.
Attributes
It takes on global attributes.
Example
<p>The <dfn><abbr title=”Cascading StyleSheet”>CSS</abbr></dfn> is used in <b>decorating</b> and providing <b>aesthetic</b> for the site.</p>
The Strong Importance Element <strong>
This element is used to indicate that the text content is of strong importance. It renders text as bold character. It should not be used to apply bold styling but to indicate a text that is or great seriousness.
Attributes
Use global attributes.
Example
<p>Do you know that <strong>Jesus is Coming Soon!</strong></p>
The Emphasis Element <em> and <i>
The <em> element is used to place emphasis on a text or texts enclosed within. Texts enclosed within this element usually appear in italics.
The <em> and <i> elements produce the same visual result but both do different things. The <em> element is used to lay emphasis or stress a word or phrase that is of concern in a given context, while the <i> element is used to represent texts in foreign words, such as foreign, scientific and slang words.
See the Pen Strong emphasis italic by KmacIMS (@kmacims) on CodePen.
The Mark Text Element <mark>
This element is used to highlight texts for reference purposes. You can mark a text because of its relevance to a passage.
When reading a passage or a book, you may come across content that is of special important or convey a degree of relevance to you, then you may use a marker to mark such content. This is what mark is used for. To highlight part of a document that is of relevance to a user’s current activity.
When used in a quotation <q> <blockquote> it indicates texts that are relevant which was not recognized by the original author.
Attribute
Use the global attributes.
Example
shown below
The Inline Code Element <code>
This element is used to display or show that the highlighted text is part of a code. Each browser has a way of displaying the texts within the code element. You can also style the element in a unique way.
Attributes
It takes on global attributes.
Example
shown below
The Keyboard Input Element <kbd>
This element is basically used to indicate the keys a user is required to press from a keyboard input to execute a command. For example, to tell a user that you need to press the control key and S key in order to save a document, you can represent it thus:
<p>In order to save your document, press and hold the <kbd>Ctrl</kbd> + <kbd>S</kbd> keys on the keyboard.</p>
The browser will render the contents of <kbd> according to its default, however, you may style it your way using CSS.
Attributes
It uses the global attributes.
Example
See the Pen Mark & Code element by KmacIMS (@kmacims) on CodePen.
Text Manipulation Elements
The elements grouped under this heading are elements you will use to perform operations on texts. You may use some of these elements to delete, insert or reduce the size of texts enclosed within their tags. Some of them include <del> <ins> <s> <small> <sub> <sup> <u> <wbr>.
The Delete Element <del>
When reviewing a document, you may want users to keep track of what texts were removed from the original document. To achieve this, we use the <del> element. Hence, <del> is used to indicate track changes performed in an HTML document.
For example, when some texts are deleted, we use the <del> to show that such text was deleted.
Attributes
It uses the global attributes. It also uses the cite and datetime attributes.
The cite attribute is used to specify the URI that explains the changes that took place, while the datetime attribute is used to indicate the time and date of the change.
Example
See below
The Insert Element <ins>
When editing an HTML document, you may want users to know that such document was reviewed by using the <ins> element to transparently indicate the newly inserted texts.
Hence, this element is used to indicate track changes performed in an Html document. when used alongside the <del> element, it shows the user the texts that were deleted and the ones that have been used to replace the older texts.
You can decide to style the element the way you wish.
Attributes
It uses the global attributes. It also uses the cite and datetime attributes.
The cite attribute is used to specify the URI that explains the changes that took place, while the datetime attribute is used to indicate the time and date of the change.
Example
See below
The Strikethrough Element <s>
This element is used to create a strikethrough text or create a horizontal line over a text. It is more appropriately used if a text is no longer relevant within a context or is no longer accurate.
It should not be used when a document is edited or to show deleted texts. The <del> element is more appropriate.
Attributes
Use the global attributes.
Example
See below
The Small Text Element <small>
This element is used to reduce the font size of a regular text to one font smaller. That is, if a regular font is medium, it will reduce it to large; if it is large, it will reduce it to small.
In HTML5, it is not meant to be used in the main content but to represent side-comments and small prints such as copyrights, legal notices, disclaimers, caveats or attributions.
You can make a text smaller by using the <small> element.
Attributes
Use global attributes.
Example
The Subscript and Superscript Elements <sub> <sup>
The <sub> element is used to specify subscript texts, while the <sup> element is used to specify superscript texts.
Attributes
Use global attributes
The Underline Element <u>
In HTML5, this element should not be used to add underline to texts. It is rather used to specify, especially, misspelt words or words that should be styled differently.
To use the underline on texts, use the text-decoration property of CSS.
Attributes
Use global attributes.
Example
See below
The Word Break Opportunity Element <wbr>
You can use this element to break a very long word to avoid the browser breaking it at the wrong point. For example, if you come across a word such as gwongwozolikwatiouslycalistical or a long URL which you believe may break during a display by the browser. You simply add the <wbr> element at a point you would prefer the browser to break the word or web address.
Attributes
Use global attributes.
Example
In the example, if the browser would break the word, it will break it at any of the <wbr> points.
See the Pen Text manipulation elements by KmacIMS (@kmacims) on CodePen.
The Embed Elements
Elements described in this section are used to attach or insert items on the web page. Though, all are not used for attachment, but they are used to add items that are not just text items to the HTML document. some of these items include: <img> <object> <param> <script> <ruby> <time>
The Image Embed Element <img>
The <img> element is used to insert or embed image object to an html document. Images can be of any of the formats jpg/jpeg, png, gif, svg, bmp, tiff, etc.
Attributes
In addition to the global attributes, the <img> element can have the following attributes:
Alt: used to specify an alternate name for the image. It assists in SEO as well as is used when the image fails to display in a browser.
Decoding: used to tell a browser the method it will use to decode the image. It has the following value: auto, sync and async.
Ismap: a Boolean attribute used to represent a server-side image map. It is used only when the <a> element is used to enclose the <img> element.
Other attributes which have been previously explained include: src, crossorigin, height, width, srcset, and usemap.
Example
See below
The Map and Area Elements <map> <area>
The <map> and <area> elements are used to define a hot-spot area or clickable spots on an image. The <map> element encloses the <area> element such that the area element can be nested to include more than one spot that can be clicked on the image.
Attributes
Both elements take global attributes.
The <map> element must have a name attribute. this attribute is used to create a relationship between the image and the map. The value of the name attribute = #value of the usemap attribute of the specified image.
The <area> element has the following specific attributes:
Shape: used to define the shape that is used to create the hot-spot on the image. Shape attribute can have the following values: rect (which defines a rectangular shape), circle (which defines a circular shape on the image), default (which defines the entire region of the image), and poly (which defines a polygon shape on the image).
The rectangular (rect) shape has 4 coordinate points (x1, y1, x2, y2) to represent the left(x1)-top(y1) corner, and right(x2)-bottom(y2) corner.
The circular (circle) shape has 3 coordinate points (x, y, r) to represent the center of the circle coordinate (x, y) and the radius (r) of the circle.
The polygon (poly) shape has n coordinate points (x1, y1, x2, y2, x3, y3, …, xn, yn) depending on the number of sides of the polygon. If the polygon has 5 sides, then you will have 10 coordinate points.
Coords: used to specify the coordinates points of the shape used to define a hot-spot on the image. A rect shape may have (23, 40, 70, 90), all in pixels (px).
Other attributes include: alt, href, hreflang, target, download, ping, rel, referrerpolicy,
Example
See the Pen Image and area elements by KmacIMS (@kmacims) on CodePen.
The Parameter Element <param>
We discussed the object element in the previous module, though it is an inline level element. Here, we’ll look at it again because it is associated with the <param> element.
The parameter <param> element is used together with the <object> element to set parameters for the resource embedded in an HTML document using the <object> element. The specified parameter will be passed on to the plugins responsible for displaying the embedded resource in a browser window.
Attributes
In addition to the global attributes, the following attributes should be specified: value, name.
Example
See the Pen param element by KmacIMS (@kmacims) on CodePen.
The Script Element <script>
This is used to define, embed or reference an executable code, usually, JavaScript. As have been seen from some examples above, we usually use the <script> element whenever a JavaScript code is to be added to our HTML document.
The script element may be used for an inline script within an HTML document or be used to link to external JS file using the src attribute.
Attributes
Use global attributes and: async (a Boolean to load the script asynchronously), crossorigin, defer (load script after the document has parsed), src, type, etc.
Example
See below
The Time Element <time>
The <time> Element is used to specify a given time period in HTML document.
Attributes
Use global attributes and the datetime attribute.
Example
<p>Our daily opening hours is between <time>08:00</time> to <time datetime= “2019-07-15 17:00”>17:00</time></p>
See the Pen Script element by KmacIMS (@kmacims) on CodePen.
Conclusion
So far, we’ve been able to cover to a large extent some basic HTML element and their attributes. We shall continue with the form and table elements.
