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.
Links
The <a> tag, short for "anchor," creates hyperlinks to other web pages or resources. The href attribute within the <a> tag specifies the destination URL or the path to the linked resource. Links can be applied to text, images, or other HTML elements, allowing users to navigate between different pages or access additional information. When creating links, use clear and descriptive text to indicate the purpose or destination of the link.
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>