HTML Elements

Components

<h2 id="elements">HTML Elements</h2>
Element
<h2 id="elements">HTML Elements</h2>
Tag
<h2>
Attribute
id
Attribute's value
"elements"
Text content
"HTML Elements"

Semantic elements

Semantic elements
Semantic elements are elements with meaning
Examples: <header>, <article>, <form>, <nav>, and <table>
Non-semantic elements
Non-semantic elements tells nothing about its content.
Examples: <div> and <span>

Elements level

Block level elements
A block: Start in a new line, occupy entire horizontal space of its parent element (container), with height depends on its content.
Generic block level element: <div>
Other examples: <p>, <ul>-<li> and <h1>-<h6>
Inline level elements
Within line: Doesn't start a new line, only takes up as much width as necessary, same with height. Look like span of writing than block.
Generic inline level element: <span>
Other examples: <code>, <a> and <strong>

Check out the CSS Flow layout for normal flow etc.

Structure

<html> is the main root and its direct children are <head> where we put metadata and <body> where we put the content. Metadata elements inside <head> are written as direct children. The content elements though, are very flexible and can be super nesting. Below is just an example to give a rough idea.

Keep in mind that many semantic tags are actually from HTML5 in 2008. Before then, there were no <header>, <nav>, <section> and <footer> for example. They are all sectioned inside nesting <div> when needed.

HTML structure
<html>
    <head>
        <title>...</title>
        <meta>
        <link>
        <base>
        <style>...</style>
    </head>
    <body>
        <header>...</header>
        <nav>...</nav>
        <main>
            <section>...</section>
            <section>...</section>
            <section>...</section>
        </main>
        <aside>...<aside>
        <footer>...</footer>
        <script>...</script>
    </body>    
</html>

In the following sections, elements will be listed by their tags and sectioned based on their functions/roles. Listing will be given in nesting style. Some parent-child relations are rather exact, some are more of an illustration or common example to give a better idea how these element tags are used.

Main root

<main>
Root element
Direct children:
<head>
Metadata container
<body>
Sectioning root

Document metadata

<head>
Metadata container
Metadata elements are direct children of <head> element.
<title>
Browser's title bar or page's tab
Text only. Tag within this element will be ignored.
Example:
<title>HTML Intro</title>
<link>
Link to external resources
Common attributes:
  • rel: relationship. Values example: stylesheet, preconnect.
  • ref: URL
Examples:
  • <link rel="stylesheet" href="./style.css">
  • <link rel="preconnect" href="https://fonts.googleapis.com">
<style>
Internal CSS
Internal CSS
<style>
    p {color: blue}
</style>
<base>
Base URL for all relative links
Only 2 attributes allowed:
  • href: URL of all the relative links in the page.
  • target: Target page of opening any page link if not specified further.
There should be just 1 declaration of each attributes. If there are more, only the first one is acknowledged.
Defining base at <head>
<head>
    <base href="https://duaransel.com/" target="_blank">
</head>
How to write the relative URL within the body
<body>
    <img src="img/placeholder.jpg">
    <a href="tags/tag_base.asp">HTML base Tag</a>
</body>
<meta>
Meta without its own element
Examples:
  • <meta charset="UTF-8">
  • <meta name="viewport" content="width=device-width, initial-scale=1">

Content sectioning

Go to HTML Content Sectioning Elements page

Text content

Go to HTML Text Content Elements page

Inline text semantics

Go to HTML Inline Text Semantic Elements page

Image and multimedia

<img>
Embeds an image into the document.
<audio>
Embeds a sound content in the document.
<video>
Embeds a media player which supports video playback into the document.
<track>
A child of media element such as audio and video.
<map>
Used together with area element. Defines an image map, a clickable link area.
<area>
Image map area element. Defines an area inside an image map that has predefined clickable areas

Embedded content

<object>
External resource that can be treated as an image, a nested browsing context, or a resource to be handled by a plugin.
<param>
<picture>
Element contains 0 or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios.
<source>
Specifies multiple medua resources for the <picture>, <audio>, or <video> element
<embed>
Embed external content at specified point in the document.
<iframe>
A nested browsing context, embedding another HTML page into the current one.
<portal>
Enabled the embedding of another HTML page into the current one for the purposes of allowing smoother navigation into new pages.

SVG and MathML

<svg>
SVG = Scalable Vector Graphics. THe element is a container that defines a new coordinate system and viewport.
Outermost element of SVG documents. Can also be used to embed SVG fragment inside an SVG or HTML document.
It will be covered in depth in the future.
Reference: SVG
<math>
Top-level element in MathML.
Every valid MathML instance must be wrapped in <math> tags.
It will be covered in depth in the future.
Reference: math

Scripting

<script>
Script
Embed executable code or data. Usually refer to JavaScript code. Can also be used with different languages, for example: GLSL and JSON.
<noscript>
Noscript
A section of HTML to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.
<canvas>
Graphic canvas
Use with either canvas scripting API or the WebGL API to draw graphics and animations.

Demarcating edits

<del> and <ins> marking deletion and insertion to the document to track changes.

<del>
Indicates deletion. Default style is strikethrough.
<ins>
Indicates insertion. Default value is underline.

Table

Go to HTML Table Elements page

Forms

Go to HTML Form Elements page

Interactive elements

<details>
Details disclosure
Only shows summary until it's clicked open.
<summary>
Disclosure's summary
<details>
    <summary>Default display</summary>
    Detailed information on default display.
</details>
Default display
  • Summary: Block level element, normal font, preceded with a triangle indicator to illustrate the stages:
    • Open: facing right
    • Closed: facing down
  • Full information: Displayed under the summary only when clicked open.
<details open>
    <summary>Open attribute</summary>
    Detailed information on open attribute.
</details>
open attribute
  • To make open as the default display
  • A boolean, attribute, written without value. Adding value even when it is "false" will make it rendered as true.
Further styling in here.
<dialog>
Dialog
Dialog box or other interactive component such as dismissible alert, inspector, or subwindow. Read more.

Web components

<slot>
Web component slot
A placeholder inside a web component that we can fill with our own markup, allow us to create separate DOM trees and present them together.
Important attribute: slot
  • A named slot is a slot with a name attribute.
<template>
Content template
A mechanism for holding HTML that is not rendered immediately when a page is loaded, but maybe instantiated subsequently during runtime in JavaScript.

Obsolete and deprecated elements

Warning: Elements before are deprecated or obsolete. Do not use, and replace if it's in use.

Sectioning
<dir>
Use instead: <ul>
<hgroup>
Use <h1>-<h6> directly
Section layout
<center>
Use CSS property instead.
For centering text: text-align: center
For centering block: margin-right: auto and margin-left: auto
<nobr>
Prevent text from automatically wrapping across multiple lines.
Use CSS property instead: white-space: nowrap
<plaintext>
Use instead: <pre>, <code>, or CSS font-family with monospace value.
<xmp>
Use instead: <pre>, <code>, or CSS font-family with monospace value.
<tt>
Teletype Text element
Use instead: <code>, <kbd>, <samp>, <var>, <pre>, or <span> styled with CSS font-family
<spacer>
Insert empty spaces on the page.
Use instead: CSS
Inline text
<acronym>
Use instead: <abbr>
<rb> <rtc>
Check out more current <ruby> elements
<basefont>
Use various CSS font properties instead
<font>
Use various CSS font properties instead
<big>
Use CSS property instead: font-size: larger
<strike>
Use instead: <del>, <s>, or CSS styling
Web components
<content>
Use instead: <slot>
<shadow>
Intended to be used as a shadow DOM insertion point.
Image and multimedia
<image>
Use instead: <img>
<bgsound>
Use instead: <audio>
Embedded content
<applet> <noembed>
Use instead: <object>
<frame> <frameset> <noframes>
Use instead: <iframe>
Just don't.
<blink>
Blinking text. Just don't. Can use animation if you must.
<marquee>
Scrolling and bouncing text. Just don't.
Others
<menuitem>
Invoke through a pop up menu
<keygen>
Generation of key material and submission of the public key as part of an html.

Resources