Topic - Block and Inline Element, Type of List with Exapmle and Interlinking
What is block and Inline Element with Example
In HTML and CSS, elements can be classified as either inline or block-level based on their default behavior and layout. Here's a brief definition and example of each:
1. Inline elements:
Inline elements are elements that are placed within a line of text and only take up as much width as necessary. They do not force line breaks before or after themselves, and they can be placed next to each other. Examples of inline elements include `<span>`, `<a>`, `<img>`, `<strong>`, `<em>`, and `<input>`.
An inline element does not start on a new line.
An inline element only takes up as much width as necessary.
Example:
```
<p>This is a paragraph with an <a href="#">inline link</a> and some <strong>bold text</strong>.</p>
```
list of Inline element :
<a> <abbr> <acronym> <b> <bdo> <big> <br ><button> <cite> <code > <dfn> <em> <i><img><input><kbd><label><map><object><output><q><samp><script><select><small><span><strong><sub><sup><textarea><time><tt><var>
2. Block-level elements:
Block-level elements are elements that take up the full width available to them and create a new line before and after themselves. They are used to create larger structures such as sections, headings, paragraphs, lists, and forms. Examples of block-level elements include `<div>`, `<h1>` to `<h6>`, `<p>`, `<ul>`, `<ol>`, and `<form>`.
Example:
```
<div>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
```
|
I am a block element |
|
Me to |
P and Div are both block Element ,
and will always start in new line and take up full width available
list of blog element :
<div> <p> <h1>` to `<h6> <ul> <ol> <li> <table> <tr> <td> <header> <footer> <section> <article> <aside> <nav>
What is List Tag and How to use List tag ?
In HTML, the list tag is used to create an ordered or unordered list of items on a web page. There are three types of list tags:
1. Unordered List
2. Ordered List
3. Description List
1. Unordered List : An unordered list in HTML is a list of items that are displayed in no specific order. Unordered lists are created using the <ul> element in HTML, and each item in the list is represented by an <li> element.
Example:
```
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
```
Output:-
- Item1
- Item2
- Item3
2. Ordered List : An ordered list in HTML is a list of items that are displayed in a specific numerical or alphabetical order. Ordered lists are created using the <ol> element in HTML, and each item in the list is represented by an <li> element.
Example:
```
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
```
Output :-
- item 1
- item 2
- item 3
3.Description List : A description list in HTML is a way to display a list of terms and their corresponding descriptions. It is similar to a dictionary, where each term is followed by its definition. Description lists are created using the <dl> element, with each term represented by an <dt> element and each description represented by an <dd> element..
Example:
```
<dl>
<dt>HTML</dt>
<dd>is a markup language</dd>
<dt>Java</dt>
<dd>is a programming language and platform</dd>
<dt>JavaScript</dt>
<dd>is a scripting language</dd>
<dt>SQL</dt>
<dd>is a query language</dd>
</dl>
```
Output :-
In all cases, the list is created using the opening tag (`<ul>`, `<ol>`, or `<dl>`) followed by one or more list items represented by the `<li>` tag. The list items should be placed within the opening and closing tags of the list type being used.
For example, to create an ordered list of items, you would use the `<ol>` tag, followed by one or more `<li>` tags for each item in the list.
It is important to note that the list tag is a container tag, meaning that it does not represent any content on its own. Instead, it is used to group and organize other HTML elements.
InterLinking
a= anchor tag , href =hyperlink
Link a Page :
<a href = "Hello.html">Click Here</a>
After page link how open in new tab :
<a href = "Hello.html" target = "_blank">Click Here</a>
How To create download link in your website
<a href "/Type of file/one.pdf" download>Download</a>
How to create a gmail link in your web site
< a href= "mailto : abc@gmail.com" > mail me </a>
No comments:
Post a Comment