Section 4. Formatting Page Content
=====================

### 4.1. Format
- HTML Formatting is a process of formatting text for better look and feel, visibility
- Formatting elements were designed to display special types of text without using CSS

| Tag | Use |
| --------------- |---------------------------------------------|
| `<strong>` | Bold Important text |
| `<b>` | Bold text |
| `<em>` | Emphasized text |
| `<i>` | Italic text |
| `<u>` | Underline text |
| `<mark>` | marked or highlighted text: |
| `<sub>` | Subscript text |
| `<sup>` | Superscript text |
| `<big>` | increase font size by one conventional unit |
| `<small>` | Small text |
| `<del>` | Deleted text |
| `<tt>` | monospaced font |

### 4.2. Headings
- Headings are used to structure pages and determine content hierarchy.
- Headings/Heading Sectioning Elements are defined with the `<h1> to <h6> `tags.
- `<h1>` defines the most important/largest/biggest heading. `<h6>` defines the least important/smallest heading.

### 4.3. Paragraphs
- The HTML `<p>` element represent/defines a paragraph
- Paragraphs are block-level elements (always goes to next line), and will automatically close if another block-level element is parsed before the closing `</p>` tag.
- Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or the first-line indentation

### 4.4. Breaks
- We use `<br />` in case we want a line break (a new line) without starting a new paragraph
- Sometimes we need to have Hard-Return in our content (poems, quotes) without starting a new paragraph, there line break `<br />` is useful.
- `<br /> `is a standalone tag, which means we need to start and close at the same place like: `<br />`

### 4.5. Emphasizing
- `<b>` bold tag simply means bold text without any extra importance just a presentation
- `<strong>` tag have meaning like strongly emphasizing Bold Important text
- `<i>` element defines the italic text, without any extra importance
- `<em>` element defines the emphasized text, with added semantic importance
- For Screen Readers or Accessibility purpose `<strong> & <em>` semantic tags are playing an important role

### 4.6. Special Characters / HTML Entity (Named character entity)
- HTML Entity represents special characters like &, copyright sign, a registered sign
- Entities are frequently used to display reserved characters
- Also, we can use Entities in place of other characters that are not available on the keyboard/difficult to type with a standard keyboard
- Entity always start with & ampersand sign and ends with; semicolon (**Example: &lt;**)
- https://dev.w3.org/html5/html-author/charref
> **Note**: Browsers may not support all entity names

| String/Character | Description / Note | Entity Name | Entity Number |
| ------------------- |--------------------------------------|------------:|--------------:|
| & | and OR ampersign OR ampersand | `&amp;` | `&#38;` |
| | non-breaking space | `&nbsp;` | `&#160;` |
| < | less than | `&lt;` | `&#60;` |
| > | greater than | `&gt;` | `&#62;` |
| ⟨ | left-pointing angle bracket | `&lang;` | `&#9001;` |
| ⟩ | right-pointing angle bracket | `&rang;` | `&#9002;` |
| € | euro | `&euro;` | `&#8364;` |
| £ | pound | `&pound;` | `&#163;` |
| © | copyright | `&copy;` | `&#169;` |
| ® | registered trademark | `&reg;` | `&#174;` |
| " | double quotation mark | `&quot;` | `&#34;` |
| TM | Trade Mark sign | `&trade;` | `&#8482;` |

### 4.6. White spaces
- By default, browsers ignore the white spaces inserted in content after 1st space
- `&nbsp;` non-breaking space entity is used to insert extra white space
> **Note**: Default only 1 space is identified/rendered by the browser
> **Note**: Many browsers blocks `&nbsp;` entity considering junk/spam, advisable to use CSS and apply margin/padding accordingly

### 4.8. Images
#### There are many formats of photos/pictures/images/Web Graphics used on the web
- BMP (Bitmap)
- GIF (Graphics Interchange Format)
- JPEG / JPG (Joint Photographic Experts Group)
- PNG (Portable Network Graphic)
- SVG (Scalable Vector Graphics)

#### `img` tag
- Images are one of the most important and integral parts of a web page used to improve the design and the appearance of a web page
- In HTML, images are embedded/defined/imported/placed with the `<img>` tag.
- The `src` attribute is required, it specifies/contains the path (the URL/web address) of the image you want to embed
- The `alt` attribute contains/provides/describe the image a textual description (alternate text) of the image, isn't mandatory but is incredibly useful for accessibility (screen readers)
- The `<img>` tag is a standalone/empty tag, it contains attributes only, and does not have a closing tag.

### 4.9. Font (Not Supported in HTML5)
- Fonts play a very important role in making a website more user-friendly and increasing content readability
- HTML `<font>` tag is used to define the font style for the text contained within it
- The font tag is having three attributes called `face, size, and color`
- The `<font>` tag defines/specifies the font face, font size, and color of the text

Section 5. Structuring Content
=====================

### 5.1. Structure
- HTML allows us to structure the document as per the meaning of the content
- Div, Table tags are used to create structure, layout but its not semantic
- HTML Semantic Tags - Structure of the webpage to show meaning, not just layout
- HTML Semantic Structural/Sectioning Elements helps to create pages more readable, accessible, better search engine results-oriented, easy to modify/update
- A semantic element clearly describes its meaning to both the browser and the developer
> **Note**: HTML5 semantic elements are supported in all modern browsers.

#### HTML Heading Sectioning Elements
h1 to h6 (total 6 headings are available)

#### HTML5 Semantic Structural/Sectioning Elements

| Tag | Use |
| ----------------- |-----------------------------------------------------|
| `<main>` | Specifies the main content of a document |
| `<header>` | Specifies a header for a document or section |
| `<nav>` | Defines navigation links |
| `<section>` | Defines a section in a document |
| `<article>` | Defines an article |
| `<aside>` | Defines content aside from the page content |
| `<footer>` | Defines a footer for a document or section |

#### Why HTML5 Semantic Structural/Sectioning Elements introduced?
- Earlier with HTML, developers used/created their own id/class names to style elements like header, footer, top nav, bottom nav, main menu, nav - navigation, main left right top bottom container, content, left article, right-sidebar, etc.
- This made it difficult and impossible for search engines to identify the correct web page content also a developer to the browser and edit content
- With the new HTML5 semantic/meaningful elements like (`<header> <footer> <nav> <section> <article> <aside>`), this will become easier
- HTML5 semantic/meaningful elements make pages more readable for machines as well users with accessibility, search engine results, more consistent and easier to use, and style
- > According to the W3C, a Semantic Web: "Allows data to be shared and reused across applications, enterprises, and communities."

#### Implementing structural hierarchy
It's really up to you what exactly the elements involved represent, as long as the hierarchy makes sense. You just need to bear in mind a few best practices as you create such structures:
- Preferably you should just `use a single <h1> per page` — this is the top-level heading, and all others sit below this in the hierarchy.
- Make sure you use the headings in the correct order in the hierarchy. Don't use `<h3>s` to represent subheadings, followed by `<h2>s` to represent subheadings — that doesn't make sense and will lead to weird results.

#### Why do we need structure?
- Users looking at a web page tend to scan quickly to find relevant content. If they can't see anything useful within a few seconds, they'll likely get frustrated and go somewhere else.
- Search engines indexing your page consider the contents of headings as important keywords for influencing the page's search rankings. Without headings, your page will perform poorly in terms of `SEO (Search Engine Optimization)`.
- Visually impaired people often don't read web pages; they listen to them instead. If headings are not available, they will be forced to listen to the whole document read out loud.

### 5.2. Div
- The div tag is known as `Division, Divider tag`
- The HTML Content Division element (`<div>`) is the generic container for flow content
- Before HTML5 Semantic Tags, the Div tag is used in HTML to make divisions of content in the web page like (text, images, header, footer, navigation bar, etc)
- The `<div>` tag is an empty container tag, which defines a division or a section by specifying child elements
- With HTML5 Semantic Tags, Div a powerful tag also used for structuring, dividing, Layout, Sectioning page/content with CSS or manipulated with scripts
- The `<div>` tag is a block-level element, so a line break is placed before and after it
- The Div is the most usable tag in web development because it helps us to separate data in the web page and we can create a particular section
- It is used to the group of various tags of HTML so that sections can be created and style can be applied to them

### 5.3. Outlines
- HTML uses Semantic Elements, Headings, Semantic Tags to generate/describe the Document Outline of page content (Document Outline = Topics, Table of Contents, Index)
- Document Outline is used by devices/browsers to scan & search content, navigate to a particular/specific section, also to determine how contents relate to each other
- HTML5 Outliner is used to understand & know the exact outline ie page structure of the HTML page/document
- Use outliner utility: https://gsnedders.html5.org/outliner/
- Text Editor like Brackets uses a `Document Outliner Plugin/extension` to show proper document outline/table of contents/topics/Indexing of page
- Brackets -> View menu -> Show Document Outline

Section 6. Creating Lists
=====================

- HTML lists are used to specify lists of information (bulleted/unordered or numbered/ordered content)
- HTML list is an incredible/useful way to represent organized content

#### HTML offers three types/ways for specifying lists of information. All lists must contain one or more list elements

| Tag | Meaning / Use / Description |
| --------------- |-----------------------------------------------------------------------------------------------------------------|
| `<ul>` | An Unordered List or bulleted list. List items using plain bullets |
| `<ol>` | An Ordered List or numbered list. Uses different schemes of numbers to list your items |
| `<dl>` | A Description List or Definition List. This arranges your items in the same way as they are arranged in a dictionary, header item, and description |

#### HTML List Tags

| Tag | Meaning / Use / Description |
| ----------------- |-----------------------------------------------------|
| `<ul>` | Defines an Unordered List or bulleted list |
| `<ol>` | Ordered List or numbered list |
| `<li>` | Defines List Item |
| `<dl>` | Defines Description List or Definition List |
| `<dt>` | Defines a term/item/heading in a description list |
| `<dd>` | Describes the term in a description list |

### 6.1. Unordered List or Bulleted List
- An Unordered List is a collection of related items that have no special order or sequence
- Unordered List is created by using HTML `<ul>` tag. Each item in the list `<li>` is marked with a bullet/rendered as a bulleted list
- `<li>` List Item, `type` attribute helps to specify the type of bullet `disc/circle/square/none`

### 6.2. Ordered List or Numbered List
- The HTML `<ol>` element represents an ordered list of items, typically rendered as a numbered list
- Ordered List is created by using HTML `<ol>` tag. Each item in the list `<li>` is marked with a number or an order in ascending/descending
- `<li>` List Item, `type` attribute helps to specify the type of order `1/A/a/I/i`

### 6.3. Description List or Definition List
- Description List or Definition List represents entries list like in a dictionary or encyclopedia
- Description List or Definition List is the ideal way to present a glossary, list of terms, or another name/value list
- A description list is a list of terms, with a description of each term
- The `<dl>` tag defines the description list, the `<dt>` tag defines the term (name), and the `<dd>` tag describes each term

Section 7. Creating Links
=====================

- A webpage can contain various links/hyperlinks that take you directly to other pages and even specific parts of a given page
- Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and images.

### 7.1. Anchor `<a>`
- A link is specified using HTML tag `<a>`, also is called `anchor tag`
- The HTML `<a>` (anchor element) creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.
- The `href` attribute is the most important attribute which specifies links to destination page or URL `href="url path"`
- `target` attribute Specifies where to display the linked URL. `target="_blank"`
- `title` attribute makes the anchor links more accessible, semantic, meanigful, `title="Click to visit"`
- `rel` attribute describes relationship of current linked object and target object, `rel="next/downnload/help/author"`

> **Syntax & Example**:
```html
<a href="url-path" title="accessible" target="_blank" rel="next/prev/help/download">Content</a>
```

> **Syntax & Example**:
```html
<a href="http://www.google.com" title="Click to visit Google">Visit Google.com</a>
```

### 7.2 internal external links

> **Syntax & Example**:
```html
<a href="./07.01.link.anchor.html"title="visit links" >Links example 1</a> <br/> <br/>

<a href="../08. Working with Table/08.01.table.basic.html"title="Click to visit Table" >Table example 1</a> <br/>
```

### 7.3 download links
- Ability to download some file or resource

> **Syntax & Example**:
```html
<a href="help.pdf" title="download help pdf" download>Download Help PDF</a>

replace the name of the file while downloading

<a href="_help123.pdf" title="download help pdf" download="html_help">text</a>

in this scenario, "_help123.pdf" will be renamed with "html_help.pdf"
```

### 7.4 fragment identifiers / anchor #links
- #Anchors helps to jump to a specific section of current (within)/other linked URL/file
- Need to Define and linked to the ID of the specific element

Section 8. Working with Table
=====================

- The HTML tables allow arranging data like text, images, links, into rows and columns of cells
- In HTML `<table>` tag is used structure data in tabular form
- HTML table tag display data in tabular form (row * column). There can be many columns in a row
- We can create a table to display data in tabular form, using `<table>` element, with the help of `<tr> , <td>, and <th>` elements
- Table row is defined by `<tr>` tag, the table header is defined by `<th>`, and table data cells is defined by `<td>`
- HTML tables are used to manage the layout of the page e.g. header section, navigation bar, body content, footer section, etc.
> **Note**: But it is recommended to use a div tag over the table to manage the layout of the page

#### HTML Table Tags

| Tag | Meaning / Use / Description |
| --------------- |-----------------------------------------------------|
| `<table>` | Defines a table |
| `<tr>` | Defines a table row |
| `<td>` | Defines a table cell |
| `<th>` | Defines a header in table |
| `<tbody>` | Group the body content in a table |
| `<thead>` | Group the header content in a table |
| `<tfoot>` | Group the footer content in a table |

### 8.1. Creating Basic Table
> **Syntax & Example**:
```html
<table>

<tr>
<td>Sr.</td>
<td>Name</td>
<td>Address</td>
<td>Contact Number</td>
</tr>

<tr>
<td>1.</td>
<td>Dinanath</td>
<td>India</td>
<td>91-1234567890</td>
</tr>

<tr>
<td>2.</td>
<td>Dino</td>
<td>USA</td>
<td>1-0987654321</td>
</tr>

<tr>
<td>3.</td>
<td>Ambar</td>
<td>UK</td>
<td>44-01234567890</td>
</tr>

<tr>
<td>4.</td>
<td>Anthony</td>
<td>India</td>
<td>91-0223344556</td>
</tr>

</table>
```

Section 9. Dealing with Forms
=====================

- HTML forms are a very powerful tool for interacting with user/user data
- HTML Forms are required, when you want to collect some data from the site visitor
- HTML Forms are one of the main points of interaction between a user and a website or application. They allow users to send data to the website
- An HTML form is a section of a document that contains controls such as text fields, password fields, checkboxes, radio buttons, submit button, etc.
- An HTML form facilitates the user to enter data that is to be sent to the server for processing such as name, email address, password, phone number, etc.
- The `<form>` tag is used to create an HTML form to take input from a user
- The `<input>` element is a fundamental form element that creates different form components with the `type` attribute

### 9.1. Creating Basic Form
> **Syntax & Example**:
```html
<form name="enrollmentForm" action="#" method="post">

<table border="1" width="800" cellspacing="5" cellpadding="5">

<th colspan="2"><h1>Enrollment Form </h1></th>

<tr>
<td>First Name:</td>
<td><Input type="text" name="firstNameText" id="firstNameText1" /> </td>
</tr>

<tr>
<td>Last Name:</td>
<td><Input type="text" name="lastNameText" id="lastNameText1" /></td>
</tr>

<tr>
<td>Password:</td>
<td><Input type="password" name="password" id="password1" /></td>
</tr>

<tr>
<td>Gender:</td>
<td>
<input type="radio" name="gender" id="male" value="male" /> Male
<input type="radio" name="gender" id="female" value="female" /> Female
<input type="radio" name="gender" id="other" value="other" /> Other
</td>
</tr>

<tr>
<td>Hobby:</td>
<td>
<input type="checkbox" name="reading" id="reading" value="reading" /> Reading
<input type="checkbox" name="music" id="music" value="music" /> Music
<input type="checkbox" name="dance" id="dance" value="dance" /> Dance
<input type="checkbox" name="sports" id="sports" value="sports" /> Sports
</td>
</tr>

<tr>
<td>Country:</td>
<td>
<select name="country" id="country">
<option value="india">India</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
<option value="nz">NZ</option>
</select>
</td>
</tr>

<tr>
<td>Comments:</td>
<td>
<textarea cols="40" rows="5">Enter Comments</textarea>
</td>
</tr>

<tr>
<td colspan="2">
<center>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="reset" value="Reset" />
</center>
</td>
</tr>

</table>

</form>
```

Section 10. HTML Layout
=====================

- Web page layout is an essential part of creating well-formed, well-structured, semantically rich websites
- A well-designed, colorful, and neat HTML page helps to establish a good user experience
- Creating a website layout is the activity of positioning the various elements that make a web page in a well-structured manner and give an appealing look to the website
- Creating an HTML Web layout is not difficult at all. All you need to know are a few tags that help in constructing an eye-catching design for a new website
- Advanced website layouts can be achieved using a combination of HTML and CSS
- Most modern websites and blogs consist of an HTML5 Semantic tag-based layout like header, footer, navbar, perhaps another sidebar, the main content area
- HTML has several elements that can be used to define each of these areas. These include the main, header, footer, nav, aside, and article elements.
- Also, the div element is a generic block-level element that can be used for grouping HTML elements to create Web layout

### HTML Layout Techniques
There are different ways to create multicolumn layouts. Each way/layout technique has its pros and cons:
1. **HTML Layout using Tables `(not recommended)`**
- Use Table, tr, td tag to create a whole layout
- Table-based layouts are not at all flexible and difficult to manage and modify
2. **Layouts using Div and Span `(CSS float property)`**
- You can use `Div - the block level element` to create a complete web layout with CSS `float` property
- It is a common and widely used technique to create entire web layouts using the CSS float property (float - helps to align block-level elements)
- Floating elements are tied to the document flow, which may harm the flexibility, and sometimes it's difficult to manage the whole layout
3. **HTML5 Semantic Tags based Layout`(CSS float property)`**
- You can use HTML5 semantic tags like main, header, nav, section, article, aside, footer, etc. to create a fully functional web layout
- It is a common and widely used technique to create entire web layouts using the CSS float property (float - helps to align block-level elements)
4. **CSS flexbox Layout**
- Flexbox is a new layout mode in CSS3
5. **CSS framework**
- Create layout faster and quicker by using a framework like Bootstrap,W3.CSS or so
6. **CSS grid Layout**
- The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
- The CSS grid layout is a new layout model optimized for two-dimensional layouts.
- It's ideal for website layouts, forms, image galleries, and anything that requires precise and responsive positioning.

### 10.1. Creating Table-based Layout `(not recommended)`
- The purpose of the `<table>` element is to display tabular data
- The simplest and most popular way of creating layouts is using HTML `<table>` tag. These tables are arranged in columns and rows, so you can utilize these rows and columns in whatever way you like.
- The `<table>` element was not designed to be a layout tool! Before the introduction to Div tag, web designers/developers use to follow table-based layout
> **Note**: Do not use tables for your page layout! They will make code length, tedious and brings a mess into your code

Section 11. What's the Next Step?
=====================