HTML: HyperText Markup Language

HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).

HTML Basics

HTML (HyperText Markup Language) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. As the title suggests, this article will give you a basic understanding of HTML and its functions.

HTML <br> Tag

Insert single line breaks in a text: For Example: 
<p>To force<br>
line breaks<br> in a text,
<br> use the br<br> element.</p>
The <br> tag is useful for writing addresses or poems.
The <br> tag is an empty tag which means that it has no end tag.

So, What HTML

HTML is a markup language that defines the structure of your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on. For example, take the following line of content:
If we wanted the line to stand by itself, we could specify that it is a paragraph by enclosing it in paragraph tags: 
<p> My cat is very grumpy </p>
The main parts of our element are as follows:
1: The opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets. This states where the element begins or starts to take effect — in this case where the paragraph begins.

2:The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.

3:The content: This is the content of the element, which in this case, is just text.

4:The element: The opening tag, the closing tag, and the content together comprise the element.

You can put elements inside other elements too — this is called nesting. If we wanted to state that our cat is very grumpy, we could wrap the word "very" in a <strong> element, which means that the word is to be strongly emphasized: 
<p> My cat is 
<strong>very </strong> grumpy.
</p>


You do however need to make sure that your elements are properly nested. In the example above, we opened the <p> element first, then the <strong> element; therefore, we have to close the <strong> element first, then the <p> element. The following is incorrect: 
<p> My cat is 
<strong>very </strong> grumpy.
</p>

Empty elements

Some elements have no content and are called empty elements. Take the <img> element that we already have in our HTML page: 
<img src="images/firefox-icon.png"
alt="My test image">
This contains two attributes, but there is no closing <img> tag and no inner content. This is because an image element doesn't wrap content to affect it. Its purpose is to embed an image in the HTML page in the place it appears.

Anatomy of an HTML document

That wraps up the basics of individual HTML elements, but they aren't handy on their own. Now we'll look at how individual elements are combined to form an entire HTML page. Let's revisit the code we put into our index.html example (which we first met in the Dealing with files article): 
<!DOCTYPE html>
<html lang="en-US">
 <head>
 <meta charset="utf-8">
 <title> My test page</title>>
 <head>
 <body>
  <img src="images/firefox-icon.png"
  alt="My test image">
 </body>
</html>

Headings

Heading elements allow you to specify that certain parts of your content are headings — or subheadings. In the same way that a book has the main title, chapter titles, and subtitles, an HTML document can too. HTML contains 6 heading levels, <h1> - <h6>, although you'll commonly only use 3 to 4 at most: 
<h1>My main title<h1>
<h2>My top level heading<h2>
<h3>My subheading<h3>
<h4>My sub-subheading<h4>

Paragraphs

As explained above, <p> elements are for containing paragraphs of text; you'll use these frequently when marking up regular text content: 
<p>This is a single paragraph</p>
    
<p>
At Mozilla, we're a global
 community of technologists and
 builders working together…
</p>

Lists

A lot of the web's content is lists and HTML has special elements for these. Marking up lists always consists of at least 2 elements. The most common list types are ordered and unordered lists:

1: Unordered lists are for lists where the order of the items doesn't matter, such as a shopping list. These are wrapped in a <ul> element. 2:Ordered lists are for lists where the order of the items does matter, such as a recipe. These are wrapped in an <ol> element. 
<p>
 At Mozilla, we're a global
 community of
</p>
    
<ul>
    <li>technologists</li>
    <li>thinkers</li>
    <li>builders</li>
</ul>

Links

Links are very important — they are what makes the web a web! To add a link, we need to use a simple element — <a> — "a" being the short form for "anchor". To make text within your paragraph into a link, follow these steps:

1. Choose some text. We chose the text "Mozilla Manifesto". 2. Wrap the text in an <a> element, as shown below 
<a>Mozilla Manifesto</a>
3. Give the <a> element an href attribute, as shown below: 
<a>href="">Mozilla Manifesto</a>
4. Fill in the value of this attribute with the web address that you want the link to: 
<a>href=
 "https://www.mozilla.org/en-US">
Mozilla</a>

<audio>: The Embed Audio element

The <audio> HTML element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a MediaStream.
For Example 
<figure>
<figcaption>
 Listen to the T-Rex:
</figcaption>
<audio
 controls
 src="/media/cc0-audio/t-rex-roar.mp3">
 Your browser does not support the
<audio> element.
</audio>
 </figure>
The above example shows simple usage of the <audio> element. In a similar manner to the <img> element, we include a path to the media we want to embed inside the src attribute; we can include other attributes to specify information such as whether we want it to autoplay and loop, whether we want to show the browser's default audio controls, etc.
Attributes
autoplay
A Boolean attribute: if specified, the audio will automatically begin playback as soon as it can do so, without waiting for the entire audio file to finish downloading. controls
If this attribute is present, the browser will offer controls to allow the user to control audio playback, including volume, seeking, and pause/resume playback. crossorigin
This enumerated attribute indicates whether to use CORS to fetch the related audio file. CORS-enabled resources can be reused in the <canvas> element without being tainted. The allowed values are: anonymous
Sends a cross-origin request without a credential. In other words, it sends the Origin: HTTP header without a cookie, X.509 certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (by not setting the Access-Control-Allow-Origin: HTTP header), the image will be tainted, and its usage restricted. use-credentials
Sends a cross-origin request with a credential. In other words, it sends the Origin: HTTP header with a cookie, a certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (through Access-Control-Allow-Credentials: HTTP header), the image will be tainted and its usage restricted. disableremoteplayback Experimental
A Boolean attribute used to disable the capability of remote playback in devices that are attached using wired (HDMI, DVI, etc.) and wireless technologies (Miracast, Chromecast, DLNA, AirPlay, etc). See this proposed specification for more information.
Note: In Safari, you can use x-webkit-airplay="deny" as a fallback.
loop
A Boolean attribute: if specified, the audio player will automatically seek back to the start upon reaching the end of the audio. preload
This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. It may have one of the following values: 
none:
Indicates that the audio
should not be preloaded.
metadata:
Indicates that only audio
metadata (e.g. length) is fetched.
auto:
Indicates that the whole audio
file can be downloaded, even
if the user is not
expected to use it.
empty string:
A synonym of the auto value.
The default value is different
for each browser. The spec advises
it to be set to metadata.
note: The autoplay attribute has precedence over preload. If autoplay is specified, The browser is not forced by the specification to follow the value of this attribute; it is a mere hint.

Events

Events Name Fired when
audioprocess The input buffer of a ScriptProcessorNode is ready to be processed.
canplay The browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
canplaythrough The browser estimates it can play the media up to its end without stopping for content buffering.
complete The rendering of an OfflineAudioContext is terminated.
durationchange The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the HTMLMediaElement.load method is called to reload it.
ended Playback has stopped because the end of the media was reached.
loadeddata The first frame of the media has finished loading.
loadedmetadata The metadata has been loaded.
pause Playback has been paused.
Play Playback has begun.
plaing Playback is ready to start after having been paused or delayed due to lack of data.
ratechange The playback rate has changed.
seeked A seek operation completed.
seeking A seek operation began.
stalled The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
suspend Media data loading has been suspended.
timeupdate The time indicated by the currentTime attribute has been updated.
volumechange The volume has changed.
waiting Playback has stopped because of a temporary lack of data

Browser support

Chrome Edge Safari Mini Firefox Opera IE
Support Support Not Support Support Support Support

<div>: The Content Division element

The <div> HTML element is the generic container for flow content. It has no e ffect on the content or layout until styled in some way using CSS (e.g. styling is directly applied to it, or some kind of layout model like Flexbox is applied to its parent element).
For Example 
<div class="warning">
<img src="/media/examples/leopard.jpg"
 alt="An intimidating leopard.">
    <p>Beware of the leopard<p>
</div>
As a "pure" container, the <div> element does not inherently represent anything. Instead, it's used to group content so it can be easily styled using the class or id attributes, marking a section of a document as being written in a different language (using the lang attribute), and so on.
Attributes
Note: The align attribute is obsolete; do not use it anymore. Instead, you should use CSS properties or techniques such as CSS Grid or CSS Flexbox to align and position <div>elements on the page.
Examples 
<div>
    <p>Any kind of content here.
 Such as:
  <p>, <table>. You name it!</p>
</div>
Any kind of content here. Such as You name it!
A Styled example
This example creates a shadowed box by applying a style to the <table> using CSS. Note the use of the class attribute on the <table> to apply the style named "shadowbox" to the element.
HTML 
<div class="shadowbox">
<p>Here's a very 
 interesting note displayed in a
 lovely shadowed box.</p>
<div>

Css 
.shadowbox {
  width: 15em;
  border: 1px solid #333;
  box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  background-image:
  linear-gradient(
  180deg, #fff, #ddd 40%, #ccc
  );
 }
Here's a very interesting note displayed in a lovely shadowed box.

Browser support

Chrome Edge Safari Mini Firefox Opera IE
Support Support Support Support Support Support

<iframe>: The Inline Frame element

The <iframe> HTML element represents a nested browsing context, embedding another HTML page into the current one.
For Example: 
<iframe id="inlineFrameExample"
 title="Inline Frame Example"
 width="300"
 height="200"
 src="https://www.openstreetmap.
 org/
export/embed.html?
 bbox=-0.004017949104309083%2C51.
 47612752641776%2C0.
 00030577182769775396%2C51.
 478569861898606&layer=mapnik">
</iframe>
Each embedded browsing context has its own session history and document. The browsing context that embeds the others is called the *parent browsing context*. The *topmost* browsing context — the one with no parent — is usually the browser window, represented by the Window object.
Warning: Because each browsing context is a complete document environment, every <iframe> in a page requires increased memory and other computing resources. While theoretically you can use as many <iframe>s as you like, check for performance problems.
Attributes
allow
Specifies a feature policy for the <iframe>. The policy defines what features are available to the <iframe> based on the origin of the request (e.g. access to the microphone, camera, battery, web-share API, etc.). For more information and examples see: Using Feature Policy > The iframe allow attribute.
allowfullscreen
Set to true if the <iframe> can activate fullscreen mode by calling the requestFullscreen() method.
Note: This attribute is considered a legacy attribute and redefined as allow="payment".
csp
A Content Security Policy enforced for the embedded resource. See HTMLIFrameElement.csp for details.
fetchpriority
Provides a hint of the relative priority to use when fetching the iframe document. Allowed values:
high
Signals a high-priority fetch relative to other iframe documents.
low
Signals a low-priority fetch relative to other iframe documents.
auto
Default: Signals automatic determination of fetch priority relative to other iframe documents.
height
The height of the frame in CSS pixels. Default is 150.
loading
Indicates how the browser should load the iframe: eager: Load the iframe immediately, regardless if it is outside the visible viewport (this is the default value). lazy: Defer loading of the iframe until it reaches a calculated distance from the viewport, as defined by the browser.
name
A targetable name for the embedded browsing context. This can be used in the target attribute of the <a>, <form>, or <base> elements; the formtarget attributeof the <input> or <button> elements; or the windowName parameter in the window.open() method.

Browser support

Chrome Edge Safari Mini Firefox Opera IE
Support Support Support Support Support Support

<abbr>: The Abbreviation element

The <abbr> HTML element represents an abbreviation or acronym.
When including an abbreviation or acronym, provide a full expansion of the term in plain text on first use, along with the <abbr> to mark up the abbreviation. This informs the user what the abbreviation or acronym means.
The optional title attribute can provide an expansion for the abbreviation or accronym when a full expansion is not present. This provides a hint to user agents on how to announce/display the content while informing all users what the abbreviation means. If present, title must contain this full description and nothing else.
For Example
<p>You can use
<abbr title="Cascading 
StyleSheets"> CSS</abbr>
to style your <abbr
 title="HyperText Markup Language"
<HTML</abbr>p>
Attributes
This element only supports the global attributes. The title attribute has a specific semantic meaning when used with the <abbr> element; it must contain a full human-readable description or expansion of the abbreviation. This text is often presented by browsers as a tooltip when the mouse cursor is hovered over the element.

Browser support

Chrome Edge Safari Mini Firefox Opera IE
Support Support Support Support Support Support

<table>: The Table element

The <table> HTML element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.
For Example 
<table>
 <thead>
 <tr>
 <th colspan="2">
 The table header
 ></th>
 </tr>
  <thead>
  <tbody>
   <tr>
    <td>The Table Body</td>
    <td>The Table Columns</td>
   </tr>
  </tbody>
</table>
Attributes
align
This enumerated attribute indicates how the table must be aligned inside the containing document. It may have the following values:
  • left: the table is displayed on the left side of the document;
  • center: the table is displayed in the center of the document;
  • right: the table is displayed on the right side of the document.
bgcolor
The background color of the table. It is a 6-digit hexadecimal RGB code, prefixed by a '#'. One of the predefined color keywords can also be used.
border
This integer attribute defines, in pixels, the size of the <frame> surrounding the table. If set to 0, the frame attribute is set to void. To achieve a similar effect, use the CSS border shorthand property.
cellpadding
This attribute defines the size of the space between two cells in a percentage value or pixels. The attribute is applied both horizontally and vertically, to the space between the top of the table and the cells of the first row, the left of the table and the first column, the right of the table and the last column and the bottom of the table and the last row.
For Example 
<table>
      <tr>
        <td>John</td>
        <td>Doe</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
      </tr>
  <table>
John Doe
Jane Doe 

<p>Simple table with header</p>
<table>
  <tr>
    <th>First name</th>
    <th>Last name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
<table>
<p>Table with thead, tfoot,
and tbody</p>
<table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tfoot>
</table>
<p>Table with colgroup</p>
<table>
  <colgroup span="4"></colgroup>
    <tr>
      <th>Countries</th>
      <th>Capitals</th>
      <th>Population</th>
      <th>Language</th>
    </tr>
    <tr>
      <td>USA</td>
      <td>Washington, D.C.</td>
      <td>309 million</td>
      <td>English</td>
    </tr>
    <tr>
      <td>Sweden</td>
      <td>Stockholm</td>
      <td>9 million</td>
      <td>Swedish</td>
    </tr>
</talbe>

<p>
Table with colgroup and col
</p>
<talbe>
 <colgroup>
  <col
  style="background-color:#0f0">
  <col span="2">
  </colgroup>
  <tr>
    <th>Lime</th>
    <th>Lemon</th>
    <th>Orange</th>
  </tr>
  <tr>
    <td>Green</td>
    <td>Yellow</td>
    <td>Orange</td>
  </tr>
</table>
<p>Simple table with caption</p>
<table>
<caption>
  Awesome caption
</caption>
  <tr>
<caption>
 Awesome data
<caption>
  </tr>
</table>

Simple table with header

First name Last name
John Doe
Jane Doe

Table with thead, tfoot, and tbody

Header content 1 Header content 2
Body content 1 Body content 2
Body content 1 Body content 2

Table with colgroup

Countries Capitals Population Language
USA Washington, D.C. 309 million English
Sweden Stockholm 9 million Swedish

Table with colgroup and col

Lime Lemon Orange
Green Yellow Orange

Simple table with caption

Awesome caption Awesome data