Important HTML elements | Nilead (2024)

Inline vs Block Elements

Basic Elements

A text header, denoted using the<h1>,<h2>,<h3>,<h4>,<h5>,<h6>tags.
A paragraph, denoted using the<p>tag.
A horizontal ruler, denoted using the<hr>tag.
A link, denoted using the<a>(anchor) tag.
A list, denoted using the<ul>(unordered list),<ol>(ordered list) and<li>(list element) tags.
An image, denoted using the<img>tag
A divider, denoted using the<div>tag
A text span, denoted using the<span>tag

Text headers and paragraphs

There are 6 different types of text header you can choose from h1, h2, h3, h4, h5, h6 with h1 being the topmost heading with the largest text.

Best SEO practices indicate that there should be only ONE h1 tag per page

<!DOCTYPE html><html> <head> </head> <body> <h1>My First Page</h1> <p>This is my first page.</p> <h2>A secondary header.</h2> <p>Some more text.</p> </body></html>

Links

A link ("anchor") is a small span of text that will direct you to a different section on the page, or to a different page.

Lists

HTML provides a way to create both an ordered list (with elements counting up, 1, 2, 3...) and an unordered list with bullets instead of numbers.

Order list:

<p>Here is a list of ordered items:</p><ol> <li>First item</li> <li>Second item</li> <li>Third item</li></ol>

Un-ordered list:

<p>Here is a list of unordered items:</p> <ul style="list-style-type: disc"> <li>First item</li> <li>Second item</li> <li>Third item</li></ul>

List can be nested inside each other:

<ul> <li>Coffee</li> <li>Tea <ol> <li>Black tea</li> <li>Green tea</li> </ol> </li> <li>Milk</li></ul>

Images

Images in HTML are inline elements that can be placed within a paragraph.

<img src="/static/img/code.jpg" width="100"><img src="/static/img/code.jpg" style="width: 100px">

(There is also the picture element but we will not discuss it here)

Videos

Videos in HTML are inline elements that can be placed within a paragraph.

<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg">Your browser does not support the video tag.</video>

Note The video element is new, some older browsers may not support it.

Divs

The<div>tag defines a division or a section in an HTML document. Div is a block element.

Spans

The<span>tag is an inline container used to mark up a part of a text, or a part of a document.

The<span>tag is easily styled by CSS or manipulated with JavaScript using the class or id attribute.

The<span>tag is much like the<div>element, but <div> is a block-level element and<span>is an inline element.

Tables

The HTML <table> element represents tabular data — that is, the information presented in a two-dimensional table comprised of rows and columns of cells containing data.

<table> <thead> <tr> <th colspan="2">The table header</th> </tr> </thead> <tbody> <tr> <td>The table body</td> <td>with two columns</td> </tr> </tbody></table>

The table element can be easily abused for layout purposes!!!

In version 5 of HTML (the latest version), some new elements are introduced. These new elements can be used to describe the purpose of the data/content the element holds.

Some important elements

<article>: Defines an article
<aside>: Defines content aside from the page content
<details>: Defines additional details that the user can view or hide
<figcaption>: Defines a caption for a <figure> element
<figure>: Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer>: Defines a footer for a document or section
<header>: Specifies a header for a document or section
<main>: Specifies the main content of a document
<mark>: Defines marked/highlighted text
<nav>: Defines navigation links
<section>: Defines a section in a document
<summary>: Defines a visible heading for a <details> element
<time>: Defines a date/time