HTML : tags / grammer (inline tags)

In HTML, inline elements are those that are typically used within a line of text or alongside other inline elements. Unlike block-level elements, inline elements do not create a new line or a distinct block on the webpage. This mean inline do not have height. Here are some commonly used inline elements:

span

<span>Hello</span>
<span>World</span>

=> Line breaks become spaces. => Hello World 
=> For spacing to be applied along with the font size, css must be applied to the parent.

<span>Hello</span><span>World</span>
=> HelloWorld 


<span style="width:100px;">Hello</span>
<span style="height:100px;">World</span>
=> no response
=> As an inline element is an element that handles text, it cannot have a horizontal or vertical size.

<span><div></div></span> => impossible
<span><span></span></span> => possible

<span style="margin:20px 20px;">Hello</span>
<span style="padding:20px 20px;">World</span>

 

img

<img src="" alt="" />
=>  alt is the text to display information about the picture when the src image is not visible.

 

a

</a> => Anchor
"target="_black""   => If you put this attribute, the photo will open in a new tab when clicked. 

br

<br /> => Line break

input

The <input> element is used to create various types of form controls, such as text fields, checkboxes, radio buttons, and more. It allows users to input or select data.

 

<input type="text" value="hello"/>
=> value : pre-populated value

<input type="text" placeholder="Enter name"/>
=> placeholder : A hint of the value to be entered by the user

<input type="text" disabled /> 

<lable> => inline
<input type="checkbox" /> Apple
</lable>
<lable>
<input type="checkbox" checked /> Banana
</lable>

 

label

The <label> element is used to provide a text label for form controls, such as <input> elements. It helps in associating the label text with the corresponding input field.

 

<lable> 
<input type="radio" name="fruits" /> Apple
</lable>
<lable>
<input type="radio" name="fruits" /> Banana
</lable>

=> radio: Receives only one from the group whether the user checks
=> name : group named 'fruits'

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

strong, em

These elements are used to apply semantic emphasis to text. <strong> indicates strong importance or importance for the overall meaning, while <em> represents emphasized text.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

code

The <code> element is used to represent a block of code or a snippet within a line of text. It typically applies a monospace font and preserves whitespace and formatting.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code

sub

These elements are used to render superscript and subscript text, respectively. They are often used for footnotes, mathematical equations, chemical formulas, and other similar notations.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub