Understanding HTML Elements: Inline vs. Block and Key Terminologies in HTML5

Demystifying HTML5 Elements: Inline vs. Block and Key Terminologies Explored:


HTML elements can be classified as "inline" and "block" (or "inline-level" and "block-level") based on how they are rendered and how they affect content layout. While the classification of elements may vary depending on the HTML version, below is a detailed list of commonly considered "inline" and "block" elements in HTML5:


Inline Elements (inline-level):


<span>: Used to apply styles to specific text snippets or group elements into a logical unit.

<a>: Creates an anchor link or hyperlink to other pages or resources.

<strong> and <b>: Used to emphasize or highlight text by applying a bold style. <strong> carries greater semantic importance.

<em> and <i>: Used to emphasize or give emphasis to text by applying an italic style. <em> carries greater semantic importance.

<code>: Used to represent computer code.

<abbr>: Used to provide an abbreviation or acronym, displaying a tooltip with the full text when hovered over.

<time>: Defines a specific date or time within the text.

<q>: Used to indicate inline short quotations.

<br>: Creates a line break (not a content element but an empty element).


Elements that are not Inline (block-level):


<div>: Used to create generic divisions or sections within an HTML document. It is a block-level element that creates a separate block.

<p>: Defines a paragraph of text. It creates a separate block and automatically adds line breaks before and after the text.

<h1> to <h6>: Used to define headings of different levels of importance. They create separate header blocks.

<ul> and <ol>: Used to create unordered lists (<ul>) and ordered lists (<ol>) respectively. List items are marked with <li> and displayed as separate blocks.

<table>: Creates a table with rows (<tr>), header cells (<th>), and data cells (<td>). Tables are block-level elements that organize data in a grid.

<form>: Defines a form containing interactive elements such as input fields (<input>) and buttons (<button>).

<section>, <article>, <aside>, <header>, <footer>: These elements are used to create specific content sections within an HTML document, providing semantic structure.

<nav>: Defines a navigation section within the document.

<figure> and <figcaption>: Used to represent multimedia content such as images, graphics, or videos with an optional caption.


Other terminology used in HTML5 includes:


Semantic Tags: Refers to tags added to HTML5 to provide meaning and structure to content, aiding indexing and accessibility by search engines. Examples include <header>, <nav>, <section>, <article>, <aside>, <footer>, among others mentioned earlier.


Form Tags: Tags used to create interactive forms, such as <input>, <select>, <textarea>, <button>, <label>, etc.


Header Tags: Refers to tags used to create headers in the document, such as <h1> to <h6>.


In addition to the aforementioned terminologies, there are other relevant ones in the context of HTML5. 


Here are a few:


Global Attributes: Attributes that can be used in any HTML element and serve common purposes. Examples of these attributes include class, id, style, title, data-, aria-, among others.


Semantic Attributes: Attributes specific to semantic elements in HTML5 that provide additional information for accessibility and SEO(Search Engine Optimization). Examples of these attributes include role, aria-*, datetime, alt, src, among others.


Microdata: A specification of HTML5 that allows adding structured information to an HTML document, facilitating understanding of the content by search engines. This is achieved through attributes like itemscope, itemtype, itemprop, and itemvalue.


ARIA (Accessible Rich Internet Applications): A set of attributes and attribute values defined in HTML5 to enhance web application accessibility for people with disabilities. ARIA attributes are used to describe the behavior and function of interactive elements, making them more accessible to screen readers and other assistive devices.


Web Components: A collection of HTML5 technologies that enable the creation of reusable custom components for building web applications. Web Components consist of three core technologies: Custom Elements, Shadow DOM, and HTML Templates.


Canvas: An HTML5 element that provides a 2D drawing area through JavaScript scripting. The <canvas> element can be used to create graphics, animations, games, and other interactive applications directly in the browser.


These are just a few of the relevant terminologies in HTML5. The HTML5 specification is comprehensive and encompasses various other terminologies and features that can be explored to create modern and interactive web pages.


Reference: https://www.w3schools.com/html/default.asp

Comments

Post a Comment

Popular posts from this blog

Enhancing Form Accessibility and Usability with HTML <'label'> Element

Image
Improving Form Accessibility and User Experience with HTML <label> Element: The HTML element <label> is used to associate a descriptive text with a form element, such as <input> , <textarea> , <select> , among others. It plays an important role in making forms more accessible and understandable for users. Here's a detailed explanation of using <label> : When to use <label> : 1) Associating labels with form elements: The main purpose of <label> is to provide a description associated with a form element. This is especially useful when you have an input field, like a text field, where the user needs to provide some type of information. The <label> helps identify and clearly describe the purpose of the field. 2) Accessibility: Using <label> correctly improves the accessibility of your form. It allows screen readers to identify the relationship between the label and the corresponding input field, making it easier for
Read more

A Beginner's Guide to Using the <'svg'> Tag for Scalable Vector Graphics

Image
Learn how to create and customize scalable vector graphics using the <svg> tag, and unleash your creativity! The <svg> tag is used to insert scalable vector graphics into a web page. It stands for Scalable Vector Graphics . Vector graphics are different from regular images, such as JPEGs or PNGs , as they are created using mathematical descriptions of shapes and lines, rather than pixels. The use of the <svg> tag is recommended when you want to include scalable vector graphics on your web page. It is ideal for creating icons, logos, data visualizations, illustrations, and other visual elements that need to be scalable and adapt to different screen sizes. If you don't use the <svg> tag, you would have to rely on other image formats, such as JPEG or PNG , which are pixel-based and not as scalable. This means that when you resize a pixel-based image, it may lose quality and become pixelated or blurry. The <svg> tag provides various ways to creat
Read more