Tags for text, formatting, citation and semantic and usability improving attributes

hi today I am going to dive deeper into html

*text related tags*

header tags
The heading elements in HTML are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. These elements are used to define headings of different levels, with <h1> being the highest level and <h6> being the lowest.

paragraph tags
The<p>element of HTML is used to represent the paragraph.

pre tag

• The <pre> tag is an HTML element that is used to define preformatted text. Preformatted text is displayed in a fixed-width font and preserves spaces and line breaks.

• The <pre> tag is often used to display code examples or other content that needs to be displayed exactly as written, without any additional formatting being applied by the browser.

format related tags **
**strong and bold and their difference

before going to these tags let's know what are the screen readers.

Screen readers are software programs that assist users with visual impairments in accessing the content of websites and other digital media. They do this by converting the text on a webpage or document into synthetic speech, which the user can then listen to through their computer's speakers or a set of headphones.

now let's go to these tags

• strong tag:
  The <strong> tag is used to indicate that the text has strong importance or emphasis. It is typically rendered as bold text, but the meaning of the tag goes beyond just the visual appearance. Screen readers, for example, may announce the text as being "strongly emphasized" or "important".

• bold tag:
  The <b> tag, on the other hand, is used to format text as bold without any particular meaning or emphasis. It is purely a visual formatting element and does not convey any semantic information to screen readers or other assistive technologies.

In general, it is recommended to use the <strong> tag for indicating strong emphasis or importance, and to use the <b> tag only for visual formatting purposes. This helps to ensure that the content of your website is properly conveyed to all users, including those who rely on assistive technologies.

emphasis and italic and their difference

The <em> tag is used to indicate that the text has emphasis or stress. It is typically rendered as italic text, but the meaning of the tag goes beyond just the visual appearance. Screen readers, for example, may announce the text as being "emphasized" or "stressed".

The <i> tag, on the other hand, is used to format text as italic without any particular meaning or emphasis. It is purely a visual formatting element and does not convey any semantic information to screen readers or other assistive technologies.

In general, it is recommended to use the <em> tag for indicating emphasis or stress, and to use the <i> tag only for visual formatting purposes. This helps to ensure that the content of your website is properly conveyed to all users, including those who rely on assistive technologies.

small tag:

• The <small> tag in HTML is used to format small text. It is typically rendered as a smaller font size than the surrounding text, and is often used for disclaimers, legal text, or other fine print.

• small tag is intended only for small text that is part of the regular flow of the document, and not for structural or organizational purposes.

sub-script tag:

• The <sub> tag in HTML is used to format text as subscript. Subscript text is smaller than the surrounding text and is typically lowered below the baseline.

super-script tag:

• The <sup> tag in HTML is used to format text as superscript. Superscript text is smaller than the surrounding text and is typically raised above the baseline.

both sub and super script tags are used often used in scientific or technical documents to indicate subscripts or footnotes. It can also be used for other purposes, such as to indicate trademark or copyright symbols.

insert and delete tags:

• insert tag: The <ins> tag is used to mark text that has been inserted into a document. The text within the tags is typically rendered with a line under it, to indicate that it is new or added content.

• delete tag: The <del> tag is used to mark text that has been deleted from a document. The text within the tags is typically rendered with a line through it, to indicate that it has been removed.

• The <ins> and <del> tags are often used to show the changes that have been made to a document, such as in a version control system or a collaborative document editor. They can also be used for other purposes, such as to highlight new or updated content on a website.

mark tag:

• The <mark> tag in HTML is used to highlight text that is relevant to the context of the surrounding text. The text within the <mark> tags is typically rendered with a background color or other highlighting effect, to draw the reader's attention to it.

• The <mark> tag is often used to highlight key terms or phrases in a document, or to draw the reader's attention to specific passages of text. It can also be used for other purposes, such as to highlight search results or to indicate recently updated content on a website.

citation related tags:

cite tag: This tag is used to indicate the title of a work, such as a book, article, or website. The text within the <cite> tags is typically rendered in italic or with a different font style to indicate that it is a citation.

quotation tag: The <q> element in HTML represents a short inline quotation. It is used to mark a section of text as a quotation, and is typically rendered in quotation marks.

blockquote tag:The <blockquote> element in HTML represents a long quotation that is set apart from the rest of the text. It is typically rendered as indented text.

semantic tags

Semantic tags are HTML tags that provide meaning to the content they contain, rather than just describing the appearance of the content. They help to structure the content of a webpage in a way that is meaningful and easy to understand for both humans and computers.

header tag:

• The <header> tag in HTML is a semantic element that represents the header of a webpage or section of a webpage. It is typically used to contain the main heading of the webpage.

• The <header> tag can also be used to represent the header of a section within a webpage, in which case it should be used as a child element of the sectioning element (such as <section> or <article>) that it belongs to

nav tag:
A nav bar, or navigation bar, is a section of a webpage that provides links to other pages or sections within the same website. It is typically used to allow users to easily navigate around the site and find the content they are looking for.

main tag:
The <main> tag in HTML is a semantic element that represents the main content of a webpage. It is typically used to enclose the content that is central to the purpose of the webpage, and that is unique to that webpage.

section tag:
The <section> tag in HTML is a semantic element that represents a section of a webpage that has a thematic grouping of content. It is typically used to divide the content of a webpage into logical sections, each with its own heading and containing related content

article tag:
the <article> tag in html is a semantic element that represents a piece of content that can be reused and distributed as per the creator's wish.

aside tag:

• The <aside> tag in HTML is a semantic element that represents content that is related to the main content of a webpage, but that is separate from it.

• It is typically used to contain sidebars, additional information, or other related content that is not central to the main purpose of the webpage.

footer tag:

• The tag in HTML is a semantic element that represents the footer of a webpage.

• It is typically used to contain information such as the copyright notice, website credits, and links to related content or resources

attributes used to increase the usability of web page

few attributes that are used to increase the usability are:

title:
The <title> attribute is used to provide additional information about an element, such as a tooltip or pop-up text. It is often used on links and form elements to provide a brief description of the destination or purpose of the element.

alt:
The alt attribute is used to provide alternative text for images. It is especially important for users who are unable to see the images, as it allows them to understand the content of the image through the use of screen readers.

aria-lable:
The aria-label attribute is an HTML attribute that is used to provide a label for an element that does not have a visible label. This is particularly useful for custom widgets or elements that are not natively supported by HTML.