HTML - Basic Tags

Common Basic Tags

Headings

HTML has six levels of headings, from <h1> to <h6>, to structure the content of a web page. The <h1> tag is the main heading, while <h6> is the smallest subheading. Each heading level has a different style and importance. Using headings helps create a clear structure for your content, making it easier for readers to understand the organization of your web page.

Paragraphs

The <p> tag defines paragraphs of text in HTML. It is a block-level element, meaning that browsers add some vertical space before and after each <p> element. Paragraphs organize and separate chunks of text, making your content more readable. Use the <p> tag to group related sentences or ideas together, creating a logical flow of information.

Example: HTML code for a paragraph with extra spaces

<p>This    is   a   paragraph   with    extra   spaces.</p>

When a browser renders this code, it will display the text as:

Example: Rendered text for a paragraph with extra spaces

This is a paragraph with extra spaces.

Images

The <img> tag embeds images into web pages. It is a self-closing tag, meaning it doesn't need a separate closing tag. The src attribute specifies the path or URL of the image file, while the alt attribute provides alternative text for accessibility and search engine optimization. The alternative text describes the content of the image and is displayed when the image cannot be loaded or when a user is using assistive technologies, such as screen readers.

Lists

HTML has two types of lists:

List Type Tag Description
Unordered <ul> Used when the order of items is not important, typically displayed with bullet points
Ordered <ol> Used when the order of items matters, displayed with numbered markers

Each item within a list is represented by the <li> (list item) tag. Lists are useful for presenting a series of related items or steps in a structured way.

Emphasis and Strong Emphasis

To add emphasis to words or phrases within your text, you can use the <em> and <strong> tags. The <em> tag indicates emphasis and is typically rendered as italic text by browsers. It conveys a change in the meaning or tone of the emphasized content. The <strong> tag indicates strong emphasis and is typically rendered as bold text. It implies greater importance compared to the surrounding text. Use these tags sparingly to highlight key points or draw attention to specific parts of your content.

Example: HTML code with mismatched tags

<p>This is a paragraph.</div>

In this case, the opening <p> tag is closed with a </div> tag, which is incorrect. The right way to close the paragraph is:

Example: Corrected HTML code for a paragraph

<p>This is a paragraph.</p>