1. Head Tag
HTML <head> Tag
A simple HTML document, with a <title> tag inside the head section:
Simple Code ->
Output->
The following elements can go inside the <head> element:
2. Body Tag
HTML <body> Tag
The <body> tag defines the document’s body.
The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
Note: There can only be one <body> element in an HTML document.
3. Div Tag
HTML <div> Tag
The <div> tag defines a division or a section in an HTML document.
The <div> tag is used as a container for HTML elements – which is then styled with CSS or manipulated with JavaScript.
The <div> tag is easily styled by using the class or id attribute.
Any sort of content can be put inside the <div> tag!
Note: By default, browsers always place a line break before and after the <div> element.
4. Paragraph Tag
HTML <p> Tag
The <p> tag defines a paragraph.
Simple Code ->
Output ->
Browsers automatically add a single blank line before and after each <p> element.
5. Bold Tag
HTML <b> Tag
Make some text bold (without marking it as important):
Simple Code ->
Output ->
The <b> tag specifies bold text without any extra importance.
6. Break Tag
HTML <br> Tag
Insert single line breaks in a text:
Simple Code ->
Output ->
The <br> tag inserts a single line break.
The <br> tag is useful for writing addresses or poems.
The <br> tag is an empty tag which means that it has no end tag.
Note: Use the <br> tag to enter line breaks, not to add space between paragraphs.
7. Heading Tag
HTML <h1> to <h6> Tags
The <h1> to <h6> tags are used to define HTML headings.
<h1> defines the most important heading. <h6> defines the least important heading.
Simple Code ->
Output ->
Note: Only use one <h1> per page – this should represent the main heading/subject for the whole page. Also, do not skip heading levels – start with <h1>, then use <h2>, and so on.
8. Italic Tag
HTML <i> Tag
Mark up text that is set off from the normal prose in a document:
Simple Code ->
Output ->
The <i> tag defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.
The <i> tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc.
Use the <i> element only when there is not a more appropriate semantic element, such as:
- <em> (emphasized text)
- <strong> (important text)
- <mark> (marked/highlighted text)
- <cite> (the title of a work)
- <dfn> (a definition term)
9. Image Tag
HTML <img> Tag
The <img> tag is used to embed an image in an HTML page.
Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.
The <img> tag has two required attributes:
- src – Specifies the path to the image
- alt – Specifies an alternate text for the image, if the image for some reason cannot be displayed
Note: Also, always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads.
Tip: To link an image to another document, simply nest the <img> tag inside an <a> tag (see example below).
How to insert an image:
Simple Code ->
Output ->
Attributes
| Attribute | Value | Description |
|---|---|---|
| alt | text | Specifies an alternate text for an image |
| crossorigin | anonymous use-credentials | Allow images from third-party sites that allow cross-origin access to be used with canvas |
| height | pixels | Specifies the height of an image |
| ismap | ismap | Specifies an image as a server-side image map |
| loading | eager lazy | Specifies whether a browser should load an image immediately or to defer loading of images until some conditions are met |
| longdesc | URL | Specifies a URL to a detailed description of an image |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url | Specifies which referrer information to use when fetching an image |
| sizes | sizes | Specifies image sizes for different page layouts |
| src | URL | Specifies the path to the image |
| srcset | URL-list | Specifies a list of image files to use in different situations |
| usemap | #mapname | Specifies an image as a client-side image map |
| width | pixels | Specifies the width of an image |
10. ordered lists Tag
HTML <ol> Tag
Two different ordered lists (the first list starts at 1, and the second starts at 50):
The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.
The <li> tag is used to define each list item.
Tip: Use CSS to style lists.
Tip: For unordered list, use the <ul> tag.
Simple Code ->
Output ->
Attributes
11. Span Tag
HTML <span> Tag
A <span> element which is used to color a part of a text:
Simple Code ->
Output ->
The <span> tag is an inline container used to mark up a part of a text, or a part of a document.
The <span> tag is easily styled by CSS or manipulated with JavaScript using the class or id attribute.
The <span> tag is much like the <div> element, but <div> is a block-level element and <span> is an inline element.
very helpful tnx
Keep watch thankyou