HTML Lecture: Lists, Emphasis, and Links

Lists

• Lists allow us to group related items together in a structured manner.
• Two types of lists: unordered lists (UL) and ordered lists (OL).
• Unordered Lists (UL):
  • Used to group items in no particular order.
  • Each item is displayed with a bullet point.
  • Use cases: shopping lists, features lists, navigation menus.
  • Created using the <ul><li> element, with each item wrapped in an </li><li> element.
• Ordered Lists (OL):
  • Used to group items in a specific order.
  • Each item is displayed with a number by default.
  • Use cases: instructions, rankings, step-by-step guides.
  • Created using the <ol><li> element, with each item wrapped in an </li><li> element.
• Lists can be nested to create sub-lists for hierarchical data.
• List styles can be changed using CSS.

Text Emphasis

• Emphasis elements help convey the intended meaning and significance of specific parts of text.
• Three types of emphasis elements: em, i, strong, and b.
• em element:
  • Used to emphasize text, styled in italics by browsers.
  • Use cases: stressing a word or phrase relative to the surrounding text.
• i element:
  • Used to denote text that is in an alternate voice or mood.
  • Use cases: Latin names, technical terms, or book titles.
• strong element:
  • Used to indicate strong importance or seriousness.
  • Use cases: emphasizing text that is crucial or urgent.
• b element:
  • Used to draw attention to text without implying any extra importance.
  • Use cases: key terms or labels.

Creating Links

• The anchor tag <a> is used to create hyperlinks.
• Three types of links: external links, relative links, and anchor links.
• External Links:
  • Take users to a different website.
  • Example: </a><a href="https://www.google.com">Google</a>
• Relative Links:
  • Take users to another page within the same website.
  • Example: <a href="about.html">About Us</a>
• Anchor Links:
  • Take users to a specific part of the same page.
  • Example: <a href="#section2">Go to Section 2</a>
• Attributes of the anchor tag: href, target.
• href specifies the URL of the link.
• target specifies where to open the linked document.

Image Elements

• The img tag is used to embed images in a web page.
• The img tag requires the src attribute to specify the path to the image file.
• The alt attribute provides alternative text for the image, important for accessibility.
• Images can be used from external websites by providing the URL in the src attribute.