• <a> is used to create hyperlinks, allowing users to navigate between pages.
• Syntax: <a href="url">Link text</a>
• Absolute links link to other websites, for example <a href="https://yahoo.com">Yahoo</a>.
• Relative links link to pages on the same site, being relative to the current page, for example <a href="index.html">Home</a>.
• The <a> tag can also create links for email addresses and phone numbers.
• For email, use the mailto: protocol inside the href attribute. Clicking opens the default email client with the email address pre-filled. <a href="mailto:[email protected]">This is a link</a>
• For phone numbers, use the tel: protocol to create a call link on mobile devices.
• Clicking triggers the phone dialer: <a href="tel:+97470070070">Call Us</a>

HTML Line Break Element

• <br> is a line break element.
• It's a stand-alone tag called a void element in HTML5.
• It causes the next element or text to display on a new line.

HTML Horizontal Rule Element

• <hr> is a horizontal rule element.
• It's a void element.
• It configures a horizontal line on the page.
• Use hr to indicate a thematic break at the paragraph level in HTML5.

HTML Phrase Elements

• These elements indicate the context and meaning of text.
• They display inline with the text.
• <b> displays text in bold font.
• <strong> has strong importance and is also displayed in bold.
• <i> displays text in italic font.
• <em> has emphasis and is also displayed in italic font.

HTML Lists

• HTML lists group a set of related items.
• Three types: unordered, description, and ordered lists

Unordered HTML List

• <ul> starts it.
• <li> begins each list item.
• List items are marked with bullets by default`.
• Example:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

• Output:
• Coffee
• Tea
• Milk

Ordered HTML List

• <ol> starts it.
• <li> tag marks the beginning of each item.
• List items are marked with numbers by default.
• Example:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

• Output:

1. Coffee
2. Tea
3. Milk

HTML Description Lists

• A description list is a list of terms, with a description of each term.
• <dl> defines the description list.
• <dt> defines the term.
• <dd> describes each term.
• Example:

<dl>
  <dt>Coffee</dt>
    <dd>black hot drink</dd>
  <dt>Milk</dt>
    <dd>white cold drink</dd>
</dl>

• Output: Coffee black hot drink Milk white cold drink

HTML Div Element

• <div> acts as a container for other HTML elements.
• It defaults to a block element, taking the full available width with line breaks before and after.
• It can contain other block or inline display elements.
• Multiple <div> containers are permitted on the same page.

Structural Elements

• <header> contains the headings for a page.
• <nav> contains the main navigation links.
• <main> holds the main content.
• <footer> contains the footer information.

HTML Tables

• HTML tables arrange data into rows and columns, best for logically grouped items.
• <table> creates a table.
• <tr> creates table rows.
• <td> creates data cells within the rows, enclosing the actual presented data. For example:

<table>
  <tr>
    <td>Month</td>
    <td>Sales</td>
  </tr>
  <tr>
    <td>January</td>
    <td>$10,000</td>
  </tr>
</table>

• Each <td> and </tr> closing tags may optionally be omitted, and either form of element is valid.
• <caption> specifies a descriptive table title; it must immediately follow the opening <table> tag.
• <th> tags are used for row and column headings. For example:

<table>
  <caption>Monthly Sales Report</caption>
  <tr>
    <th>Month</th>
    <th>Sales</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$10,000</td>
  </tr>
</table>

• The "colspan" attribute makes a cell span over multiple columns.
• The "rowspan" attribute makes a cell span over multiple rows.
• Example of Colspan:

<table>
  <caption>Monthly Sales Report</caption>
  <tr>
    <th colspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Abdullah</td>
    <td>Ali</td>
    <td>28</td>
  </tr>
</table>

• Example of Rowspan:

<table>
  <caption>Monthly Sales Report</caption>
  <tr>
    <th>Day</th>
    <th>Time</th>
    <th>Event</th>
  </tr>
  <tr>
    <td rowspan="2">Monday</td>
    <td>09:00 AM</td>
    <td>Meeting</td>
  </tr>
  <tr>
    <td>10:00 AM</td>
    <td>Workshop</td>
  </tr>
</table>

• <thead> and <tfoot>: tables can include special header and footer rows using these tags for additional table information.
• <tbody> encloses regular table rows when <thead> and/or <tfoot> are used.
• Multiple <tbody> elements can group rows into sections for long tables.
• When printed, headers and footers can repeat on each page.
• <thead> must appear before <tbody>, but after <caption> (if present) and this enhances table readability & format

Writing Valid HTML

• Check for syntax errors.
• Benefit: valid code results in more consistent browser display.

HTML Validation Tools

• W3C HTML Validation Tool: http://validator.w3.org or http://validator.w3.org/nu.
• Additional HTML5 Validation Tool: http://html5.validator.nu.