Basic HTML Tags
Heading h1 to h6 Tags:
Any document starts with a heading. You can use different sizes for your headings. Headings in Web pages function the same way as they do in printed documents. They separate text into sections. The HTML standard defines six levels of headings, <h1> through <h6>(<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>), each one progressively smaller in font size.
While displaying any heading, browser adds one line before and one line after that heading.
Example:
<!DOCTYPE html>
<html>
<head>
<title>
My First Web page
</title>
</head>
<body>
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
</body>
</html>
Output:
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
Paragraph<p> Tag:
The <p> tag used to write a paragraph on a web page. Each paragraph text should go in between an opening <p> and a closing </p> tag. It writes all text of paragraph continually ignoring more white space, tab, new line, etc. written in the HTML document by the web browser. It writes all text of paragraph continually. If you want to write a paragraph with new line, you must use a line break <br> HTML tag in your HTML document.
Example:
<!DOCTYPE html>
<html>
<head>
<title>
My First Web page
</title>
</head>
<body>
<p>
My Anemone is the best platform for every student who can learn easily.
My Anemone provide online video classes, short notes, model paper, mock test and study material for students by our "Expert My Anemone Educator".
</p>
</body>
</html>
Output:
My Anemone is the best platform for every student who can learn easily. My Anemone provide online video classes, short notes, model paper, mock test and study material for students by our "Expert My Anemone Educator".
Preserve / Preformatted Text<pre> Tag:
The <pre> tag in HTML is used to define the block of preformatted text which preserves the text spaces, line breaks, tabs, and other formatting characters which are ignored by web browsers. Text in the <pre> element is displayed in a fixed-width font (usually Courier), but it can be changed using CSS.
Example:
<body>
<pre>
My Anemone
is the best platform for every student who can learn easily.
My Anemone provide online video classes, short notes, model paper, mock test and study material for students by our "Expert My Anemone Educator".
</pre>
</body>
Output:
My Anemone
is the best platform for every student who can learn easily.
My Anemone provide online video classes, short notes, model paper, mock test and study material for students by our "Expert My Anemone Educator".
Line Break<br> Tag:
Line break tag <br> is used to add a new line in a web page. This
tag is an example of an empty tag, where you don't need to use closing tag. The <br /> tag has a space between the characters "br" and the "/" forward slash. If you omit this space, older web browsers will have trouble rendering the line break, while if you miss the forward-slash character and just use <br> it is not valid in XHTML.
Example:
<body>
<p>
My Anemone is the best platform for every student who can learn easily.
<br>
My Anemone provide online video classes, short notes, model paper, mock test <br><br>and study material for students by our "Expert My Anemone Educator".
</p>
</body>
Output:
My Anemone is the best platform for every student who can learn easily.
My Anemone provide online video classes, short notes, model paper, mock test
and study material for students by our "Expert My Anemone Educator".
Horizontal Line<hr>Tag:
Horizontal lines are used to visually break-up sections of a document. The <hr>tag creates a line from the current position in the document to the right margin and breaks the line accordingly.
Example:
<body>
<p>
This Content is above the Horizontal line.
<hr>
This Content is below the Horizontal line.
</p>
</body>
Output:
This Content is above the Horizontal line.
This Content is below the Horizontal line.
Comment <!--...-->Tag:
The comment tag is used to insert comments in the source code. Comments are not displayed in the browsers.
You can use comments to explain your code, which can help you when you edit the source code at a later date. This is especially useful if you have a lot of code.
Example:
<body>
<!--
This is a comment outed text.
Comments are not displayed by the web browser on the web page.
-->
<p>This is not comment outed text and displayed by the web browser on the web page.</p>
</body>
This is not comment outed text and displayed by the web browser on the web page.
Text Formatting In HTML:
Whenever we want to apply some formatting on the text then we should use the formatting tags to define the format and view of the text on the web page. So, we understand the formatting of text in HTML by given below example and see the output of the given below code.
Basic Text Formatting Tags:
- <b> - Bold text
- <strong> - Strong text
- <i> - Italic text
- <u> - Underline text
- <strike> Strike text
- <tt>Monospaced Font text
- <big> Big text
- <small> - Small text
- <em> - Emphasized text
- <mark> - Marked text
- <ins> - Inserted text
- <del> - Deleted text
- <sub> - Subscript text
- <sup> - Superscript text
- <center> - Center Text
Example:
<b>Bold text</b>
<strong> Strong text</strong>
<i> Italic text</i>
<u> Underline text </u>
<strike> Strike text </strike>
<tt>Monospaced Font text </tt>
<big> Big text </big>
<small> Small text</small>
<em> Emphasized text</em>
<mark> Marked text</mark>
<ins> Inserted text</ins>
<del> Deleted text</del>
<sub> Subscript text</sub>
<sup> Superscript text</sup>
<center> Center Text</center>
Output:
Bold text Strong text Italic text Underline textStrike text Monospaced Font text Big textSmall text Emphasized text Marked text (Marked text display with yellow color in background) Inserted text Deleted text Subscript text Superscript text
Center Text
Image <img> Tag:
The <img> tag is used to embeds or put an image into the HTML document.
*Note: Images are not technically inserted into an HTML page. Images are linked to HTML pages. The <img> tag creates a holding space for the referenced image.
The <img> tag has two required attributes: "src" and "alt".
· src: The src attribute is required and contains the path to the image you want to embed.
· alt: The alt attribute holds a text description of the image, which isn't mandatory but is incredibly useful for accessibility — screen readers read this description out to their users so they know what the image means. Alt text is also displayed on the page if the image can't be loaded for some reason: for example, network errors, content blocking, or link root.
Example:
<img src="myanemone-logo.jpg" alt="My Anemone" height="90" width="90">
The <img> tag additional attributes
| Attribute | Value | Description |
| align | top, bottom, middle, left, | Deprecated− Specifies the alignment for the image. |
| alt | Text | Specifies alternate text |
| border | Pixels | Deprecated − Specifies the width of the image border. |
| crossorigin | anonymous use-credentials | It allows images from third-party sites that allow cross-origin access to be reused with canvas. |
| height | pixels or % | Specifies the height of the image. |
| hspace | Pixels | Deprecated − Amount of white space to be inserted to the left and right of the object. |
| ismap | URL | Defines the image as a server-side image map. |
| longdesc | Text | Deprecated − Specifies a URI/URL of a long description - this can elaborate on a shorter description specified with the alt attribute. |
| src | URL | the url of an image |
| usemap | #mapname | Defines the image as a client-side image map and used alongwith<map> and <area> tags. |
| vspace | Pixels | Deprecated − Amount of white space to be inserted to the top and bottom of the object. |
| width | pixels or % | Sets the width of an image in pixels or in %. |
Supported Image Formats:
| Abbreviation | File format | MIME type | File extension(s) | Browser compatibility |
| Animated Portable Network Graphics | image/apng | .apng | Chrome, Edge, Firefox, Opera, Safari | |
| Bitmap file | image/bmp | .bmp | Chrome, Edge, Firefox, Internet Explorer, Opera, Safari | |
| Graphics Interchange Format | image/gif | .gif | Chrome, Edge, Firefox, Internet Explorer, Opera, Safari | |
| Microsoft Icon | image/x-icon | .ico, .cur | Chrome, Edge, Firefox, Internet Explorer, Opera, Safari | |
| Joint Photographic Expert Group image | image/jpeg | .jpg, .jpeg, .jfif, .pjpeg, .pjp | Chrome, Edge, Firefox, Internet Explorer, Opera, Safari | |
| Portable Network Graphics | image/png | .png | Chrome, Edge, Firefox, Internet Explorer, Opera, Safari | |
| Scalable Vector Graphics | image/svg+xml | .svg | Chrome, Edge, Firefox, Internet Explorer, Opera, Safari | |
| Tagged Image File Format | image/tiff | .tif, .tiff | None built-in; add-ons required | |
| Web Picture format | image/webp | .webp | Chrome, Edge, Firefox, Opera |
An anchor tag is used to define the beginning and end of a hypertext link or hyperlink. Search engines use the tag to determine the subject matter of the destination URL. Users click on the anchor text to reach the link target. Whenever we click a hyperlink then we jump to another web page according to the given URL in anchor tag. When you move the mouse over a link, the mouse arrow will turn into a little hand.
By default, links will appear as follows in all web browsers:
· An unvisited link is underlined and blue color.
· A visited link is underlined and purple color.
· An active link is underlined and red color.
Ø href: Href stands for hypertext reference. The "href" attribute is used to create a hyperlink, the destination (address) of the document must be known. A hyperlink can link to pages on your own domain, to other websites, or to a file (such as a PDF document).
Ø name: The name attribute of the anchor tag can be used to enable users to “jump” to a specific point on a page (jump marker, anchor). This is especially useful with large pages or subdivisions.
Ø target: The target attribute specifies how the destination page or the target document should be opened. “ target=” _ blank “ “ is used for opening of the target page in a new tab. This is the usual option when using target attributes for linking to other pages.
Ø title: The title attribute gives users an important indication as to where they will be directed to when they click on a link. If the user hovers with the mouse over a link reference, the title text, which was defined in the attribute, will be displayed. This can be a tooltip or description of the resource to which the link directs. The data from the title attribute makes the site more user-friendly.
The title attribute can also be used for images and graphic files to give a brief description of what is shown in the picture.
Example:
|
Output:
| |
Example:
<a href="https://www.myanemone.com">
<img src="logo.jpg" alt="My Anemone" height="150" width="150">
</a>
Output:
0 Comments