Headings are tags used to define titles and subtitles on your page. They are crucial for creating a logical hierarchy and outline for your content.
There are six levels of headings in HTML, ranging from <h1> to <h6>. The <h1> tag is used for the main title of the page and should be unique, while <h2> to <h6> are used for subheadings, with <h2> being the second most important and so on.
The Purpose:To structure your document in a way that is understandable to both humans and machines (like search engines and screen readers). It is not just for making text big; it is for giving the text structural importance.
Paragraphs are defined using the <p> tag. This tag is used to group sentences and create blocks of text, making it easier to read and understand.
Example:
<p>This is a paragraph.</p>The Purpose:To separate blocks of text, making the content more readable and organized. Browsers automatically add some space (margin) before and after each paragraph to visually separate them from other elements on the page.
Anchor tags are created using the <a> tag. This tag is used to create hyperlinks, which allow users to navigate from one page to another or to different sections within the same page.
Example:
<a href="https://www.example.com">Visit Example.com</a>The Purpose:To link different web pages and resources together, enabling easy navigation and access to related information. The href attribute specifies the destination URL of the link.
Images are embedded in HTML using the <img> tag. This tag is used to display pictures and graphics on a webpage.
Example:
<img src="image.jpg" alt="Description of image">The Purpose:To enhance the visual appeal of a webpage and provide visual context to the content. The src attribute specifies the path to the image file, while the alt attribute provides alternative text for screen readers and in case the image cannot be displayed.
Division tags are created using the <div> tag. This tag is a block-level container used to group other HTML elements together.
Example:
<div>
<p>This is a paragraph inside a div.</p>
</div>The Purpose:To organize and structure the content of a webpage, allowing for easier styling and layout control using CSS. The <div> tag does not inherently apply any styling or meaning to its content; it is simply a container.
Span tags are created using the <span> tag. This tag is an inline container used to group text or other inline elements.
Example:
<p>This is a <span>highlighted</span> word.</p>The Purpose:To apply styles or manipulate specific parts of text within a larger block without affecting the entire block. The <span> tag is often used in conjunction with CSS to style specific words or phrases.
Break tags are created using the <br> tag. This tag is used to insert a line break within text, effectively starting a new line without creating a new paragraph.
Example:
<p>This is the first line.<br>This is the second line.</p>The Purpose:To control the formatting of text by allowing for line breaks where needed, such as in addresses or poems. The <br> tag is a self-closing tag and does not require a closing tag.
Comment tags are created using the <!-- --> syntax. Comments are not displayed in the browser and are used to leave notes or explanations within the HTML code.
Example:
<!-- This is a comment -->The Purpose:To provide context, explanations, or reminders for developers working on the code. Comments can help improve code readability and maintainability by clarifying the purpose of certain sections of code.
Lists are created using the <ul> (unordered list) and <ol> (ordered list) tags, along with the <li> (list item) tag. Unordered lists display items with bullet points, while ordered lists display items with numbers or letters.
Example of Unordered List:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Example of Ordered List:
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>The Purpose:To organize information in a clear and structured manner, making it easier for users to read and understand. Lists are commonly used for navigation menus, feature lists, and any content that benefits from a structured format.
The <hr> tag is used to create a thematic break or horizontal line in an HTML document. It is a self-closing tag and does not require a closing tag.
Example:
<hr>The Purpose:To visually separate sections of content, indicating a shift in topic or theme. The <hr> tag helps improve the readability and organization of a webpage by providing clear divisions between different parts of the content.