More on HTML

Now that the HTML basics are over, we're now moving on to some advanced HTML topics.

You can hear about several new tags and attributes often used in additional topics. All this

will broaden the prospects of development at the front end.

<DIV> Tag
The <div> tag creates a block level division or segment in an HTML document. <div> is a

block element It also serves as a container for other HTML elements. The <div> section

doesn't require any necessary attributes. When working with CSS, <div> is frequently

used to lay out a web page.

SEMANTIC ELEMENTS

Semantic HTML is an HTML which, rather than a presentation to the website, provides

context. For instance, a <p> tag says the text contains a paragraph.

Semantic HTML tags provide the content of tags which go beyond the way they look on a

page. For example, text inserted under the <code> tag is recognised as a coding

language by the browser immediately.

Non-semantic examples: <div> and <span> - says nothing about their content.

Semantic element examples: <h1> through <h6>, <p> and <ul> clearly describe their

content.

Now, here is an example of how a page is made with some common semantic tags:

1
EXTRA:

To know more about semantic elements and the benefit of using them, visit:

https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML

INTERNAL LINKS

Instead of scrolling through long pages, you satisfy your readers by offering page hops as

an alternative transport mode throughout your website. In principle, page hops is a link

only, but the links to a certain section of the same document (i.e. inner links) are the same

<a> feature as all links.

You'll know about id attributes later in CSS, so don't put too much emphasis on them now.

For eg., here's how you set up a link:

<h2 id="heading">This is the top</h2>
…….
…….
<a href="#heading">Go to top</a>

Explanation: the heading is the id of the top heading of this page, and its used in the href

attribute. The id attribute is a unique identifier for an HTML element that can be used

to locate any element. The symbol '#' is used to refer to an id.

2
By clicking the link Go to top, you will go to the line where the heading is created.

BLOCK VS INLINE ELEMENTS

The block elements include those which use the entire webpage width, effectively

blocking any other elements from being placed on the left or the right side.

Inline elements only take up as much width as necessary to show the element's contents

and after that, other elements can be made to match the inline element.

Block elements always start on a new line. But, that’s not the case with inline elements.

Block elements examples include: <div>, <p>, <h1>, <h6>, <nav>, etc.

E.g <b>, <span>, <img> etc. are examples of inline elements.

NOTE: You can also check which elements are block and which are inline by inspecting them

using chrome dev tools.

Chrome Dev Tools: You can learn a lot about your website using Chrome Developer

Tools, which are built into your Chrome browser. You can modify your page and see

how various items appear on the platform while troubleshooting and debugging

problems. HTML, CSS, and JavaScript can be manipulated using Chrome Dev Tools.

To open Chrome Dev Tools, press CTRL+SHIFT+C or right-click an item on the page,

then select Inspect. We'll go over this topic in greater detail later in the course.

TEXT FORMATTING TAGS

HTML allows us to format text just like we do in any other text-editing application like MS

Word. The text appearance of your web page will be formatted using various HTML tags.

3
This is likely to spice up the look of your website but too much variation can be unpleasant

in text formatting. HTML also distinguishes specific text elements with a particular

significance.

HTML uses elements like <b> and <i> for formatted output, such as bold or italic text

respectively.

For eg:;

<b>Hello!</b> can be used to bolden the text and

<i>Hi there!</i> can be used to italicize the text.

EXTRA:

To know more about them, visit:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics

and

https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_t

ext_formatting

SPECIAL CHARACTERS
In HTML, we have certain characters reserved for the definition of a tag that are less

than (<) and are greater than (>) signs, called an angle brackets. By using them as page

symbols, the browser may misinterpret them as markup.

However, several characters are missing from the keyboard.

Special characters, also known as HTML entities, are characters that can't be typed by

the keyboard. The character entities must be replaced in order to display these unique

characters.

HTML entity is a text, which starts with an ampersand (&) and ends with a semicolon (;).

4
Eg., these are some html entities with how they will look on browser:

● some useful character entities - &nbsp; (single space), &lt; (<), &apos; ('), &copy; (©)

● diacritical marks - a&#768;(à), O&#770;(Ô)

● mathematical symbols - &#8704;(∀) or &forall; (∀), &#8721(∑); or &sum; (∑)

● some other entities - &larr;(←), &hearts;(♥), &trade;(™)

EXTRA:

To know more about HTML entities, visit:

https://developer.mozilla.org/en-US/docs/Glossary/Entity

You can get all the available entities list here:

https://dev.w3.org/html5/html-author/charref

TABLES
Tables can also be created with simple HTML. Tables are used to display the tabular

data. A lot of tags are used to do this. All table data is included inside the <table> tags.

A table (with the <tr>-tag) divides the table into rows and divides the data cells in each row

(with the <td>-tag). .<tr> represents the table row, and <td> is used for representing a

cell's content.

The cell can contain text, pictures, lists, types, horizontally defined rules, tables and so on.

Eg:
<table border=1>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>

5
 </tr>
<tr>
<td>Row 3, cell 1</td>
<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</tr>
<tr>
<td>Row 4, cell 1</td>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>
</tr>
</table>

The table will be seen something like this:

border Attribute

For the thickness of borders, the border attribute is used. The table will be shown

without any borders if you do not assign a border attribute. It can be useful at times, but

the majority of the time, you want to show your boundaries.

Headings in a Table

HTML has a separate tag to add column names. The <th> tag is used to describe headings

in a table.

Eg:
<table border=1>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>

6
 <td>Row 1, cell 3</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
</table>

The table will be seen like this:

<thead>, <tbody>, <tfoot>

The <thead> tag is used in an HTML table to group the content of the header.

For grouping of body content in an HTML table, the <tbody> tag is used.

The <tfoot> tag is used for grouping the content of footers.

These are semantic tags which give meaning to the elements as well as other useful

features.

Additionally, when printing a large table that spans multiple pages, these elements will

allow the table header and footer to be printed at the top and bottom of each page.

Eg:
<table border="1">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3 </th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
</tr>
<tr>

7
 <td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3 </th>
</tr>
</tfoot>
</table>

The table now looks like this:

caption Tag

The <caption> tag defines a table caption.

Following the <table> tag, the <caption> tag must be inserted.

Eg: If you add <caption>Table Example</caption> just after the <table> tag, the table will

now look like this:

NOTE: You can specify only one caption per table.

8
colspan and rowspan Attribute

These two attributes, rowspan and colspan, are used to handle the layout of the tables.

The rowspan attribute is used to indicate the number of rows occupied by a specific

cell. The colspan attribute is used to specify the number of columns occupied by a

specific cell.

Both are used with the <td> tag and also with the <tr> tag.

Eg: adding attributes colspan and rowspan to the table

<table border="1">
<thead>
<tr>
<th>Column 1</th>
<th colspan="2">Column 2 and 3 heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, cell 1</td>
<td colspan="2">(Row 1, cell 2) and (Row 1, cell 3)</td>
</tr>
<tr>
<td rowspan="2">(Row 2, cell 1) and (Row 3, cell 2)</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
<tr>
<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</tr>
</tbody>
</table>

The table now looks like:

You can take a look at this cheat sheet for HTML, which will keep you from memorizing

everything:

https://html.com/wp-content/uploads/html-cheat-sheet.pdf