Common HTML elements

//Common HTML elements
­

Block vs Inline elements

Introduce the difference between block element and inline element and the two container elements (div and span) as an example of each.

July 3rd, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , |

Semantics Overview

What is semantics and why it is important

July 2nd, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , |

HTML5 Structurally based elements

Introduce the new HTML5 structurally based elements (header, section, article, aside, footer, etc)

July 3rd, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , |

Text-based elements

Introduce the text-based elements such as headings, paragraph, bold, italic, etc

July 3rd, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , |

Table

Describe HTML table and related elements, like th, tr, td, thead, tbody and tfooter.

July 3rd, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , |

List

Describe ordered list (ol), unordered list (ul) and description list (dl).

July 5th, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , |

Hyperlinks

Introduce hyperlinks, important elements that allow users to jump from one page to other web resources.

July 7th, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , |

Images

Introduce how to create images in HTML pages.

July 8th, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , |

Div vs Span

Describe inline element (span) and block element (block)

July 3rd, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , , |

A HTML5 structurally based elements example

Example of HTML5 structurally based elements (header, nav, section, aside and footer).

July 4th, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , , |

Examples of headings

Different levels of headings (h1, h2, h3, h4, h5, h6)

July 4th, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , , |

Examples of the paragraph element

Example of the paragraph element

July 4th, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , , |

Formatting elements examples

Examples of formatting elements, including b, strong, i, em, mark, small, del, ins, sub and sup.

July 4th, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , , |

Table example 1

Table example with just tr and td.

July 5th, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , , |

Table example 2

Table example with tbody, thead and tfoot.

July 5th, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , , |

Unordered HTML list

An example of unordered HTML lists (ul).

July 5th, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , , |

Ordered HTML list

An example of ordered HTML lists.

July 5th, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , , |

Description HTML list

An example of description HTML lists.

July 5th, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , , |

Hyperlink example 1: A link to Google

Basic hyperlink which references to the Google home page.

July 7th, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , , |

Hyperlink example 2: A link wraps an image

Example of an hyperlink that wraps an image

July 7th, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , , |

Hyperlink example 3: A link that wraps block elements

Example of a hyperlink that wraps block elements.

July 7th, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , , |

Hyperlink example 4: Bookmarks

Example of hyperlinks that reference to bookmarks.

July 8th, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , , |

Image example 1: Basic image

Basic image example of the solar system

July 12th, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , , |

Image example 2: The alt attribute

Basic image example of a broken image url with the alt attribute.

July 12th, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , , |

Image example 3: Specify the size of the image

How to change the size of an image.

July 17th, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , , |

Image example 4: Override the size of the image

How to use the style attribute to override external style of an image

July 17th, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , , |