Tags In HTML Part 1

1. Head Tag

HTML <head> Tag

A simple HTML document, with a <title> tag inside the head section:

Simple Code ->


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:

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 ->


alttextSpecifies an alternate text for an image
Allow images from third-party sites that allow cross-origin access to be used with canvas
heightpixelsSpecifies the height of an image
ismapismapSpecifies an image as a server-side image map
Specifies whether a browser should load an image immediately or to defer loading of images until some conditions are met
longdescURLSpecifies a URL to a detailed description of an image
Specifies which referrer information to use when fetching an image
sizessizesSpecifies image sizes for different page layouts
srcURLSpecifies the path to the image
srcsetURL-listSpecifies a list of image files to use in different situations
usemap#mapnameSpecifies an image as a client-side image map
widthpixelsSpecifies 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 ->


reversedreversedSpecifies that the list order should be reversed (9,8,7…)
startnumberSpecifies the start value of an ordered list
Specifies the kind of marker to use in the list

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.

2 thoughts on “Tags In HTML Part 1”

Leave a Reply