Table of contents
No headings in the article.
At its heart, HTML is a language made up of elements, which can be applied to pieces of text to give them different meaning in a document (Is it a paragraph? Is it a bulleted list? Is it part of a table?), structure a document into logical sections (Does it have a header? Three columns of content? A navigation menu?), and embed content such as images and videos into a page. This module will introduce the first two of these and introduce fundamental concepts and syntax you need to know to understand HTML.
An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag.
For example, <p> is starting tag of a paragraph and </p> is closing tag of the same paragraph but <p>. This is </p> a paragraph element.
Html elements helps you to define the structure of your webpage that where the content should be place and how it gonna look.
Example :-
- The
<!DOCTYPE html>declaration defines that this document is an HTML5 document - The
<html>element is the root element of an HTML page - The
<head>element contains meta information about the HTML page - The
<title>element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) - The
<body>element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. - The
<h1>element defines a large heading - The
<p>element defines a paragraph
There are many tags in HTML are :-
<a>:- The<a>tag creates a hyperlink to a web page, a file, an email, or another location on the same page with its href attribute.<abbr>:- The<abbr>tag tag is typically used for abbreviations or acronyms of longer words, such as www, HTML, HTTP, etc.<address>:- In<address>tag, you can find the contact details of the site owner or the author of an article. The information may include addresses, cellphone numbers, emails, website connections, and many more.<area>:- The<area>tags identify clickable or active regions on an image-map associated with hyperlinks.<article>:- In HTML, the<article>element represents a piece of content that can theoretically be distributed to other websites or platforms without being an integral part of them. An entire blog post, news article, or similar content can be displayed with the<article>element.<audio>:- With<audio>element, audio content can be embedded in an HTML document without the need for an additional plug-in like Flash.<aside>:- The<aside>define content which is related to the main content of a webpage, but does not constitute it.<b>:- The<b>tag in HTML specifies bold text without giving it any additional significance.<base>:- All relative URLs inside a document are given a common target address by the<base>tag.<bdi>:-<bdi>:- tells the browser's bidirectional algorithm to isolate the text contained within it from other text in the document.<bdo>:- Overriding the current text direction is done with the<bdo>(short for bidirectional override).<blockquote>:-<blockquote>tags provide a way to insert a quotation in the document from another source. Traditionally, browsers render the text inside a quote tag as indented text.<body>:-<body>tags in HTML are responsible for defining the main content within a page. This can include text, paragraphs, headings, images, tables, links, and videos.<br>:- A line break is produced by the<br>tags. This is usually used in poems or addresses that require line breaks<button>:- Clickable buttons are represented by the<button>HTML element, and can be used in forms or anywhere in a document.<canvas>:- In documents,<canvas>define regions that may be used for drawing graphics through scripting (usually JavaScript).<caption>:- Table captions are created using the HTML<caption>tag.<table>tag is used with this element to represent a table's title.<cite>:- References to cited creative works are described by the<cite>HTML element, which must include the title of the cited work.<code>:- An HTML code fragment is represented by the<code>tag, which might be a snippet of HTML or CSS.<col>:- Column properties are specified by the<col>tag for each column within a<colgroup>element<colgroup>:-<colgroup>tag specifies the group of one or more columns. By doing so, you can apply styles to entire columns, rather than repeating a style for every column and every row<data>:- A machine-readable translation is added with the help of the<data>tag.Using this element, the processors can generate a machine-readable value and the browser can produce a human-readable value.<datalist>:- The<datalist>tags provide an autocomplete feature to form elements. Users can choose data from a list of predefined options.<dd>:-<dd>:- represents 'definition description' in HTML and is used to describe or define an item in list of descriptions<del>:- The<del>tag indicates a deletion of a section of text from a document. Web browsers render the deleted text as strikethrough text.<details>:- A widget created with the<details>element shows information only when it is toggled into the "open" state.<dfn>:- A definition element in HTML is represented by a<dfn>tag, and it's used to represent instances of definitions. The defining instance of a term is usually the first time the term appears in a document<dialog>:- The<dialog>element defines dialog boxes and other interactive components of a web page that can be interacted with by the user, such as dismissible alerts.<div>:- The<div>tags are generic containers that can hold flow content, which does not have a default rendering.<dl>:- The<dl>element of HTML represents a list of descriptions. A glossary or metadata can be displayed using this element<dt>:- A term in a description or definition list is indicated by the<dt>:- HTML element, which must be used within a<dl>element. A<dd>element normally follows it.<em>:- An HTML<em>tag emphasizes a particular word or phrase within a sentence. It renders in italic form on the browser and gives semantic meaning to the text within it.<embed>:- An HTML document can use the<embed>element to embed an external application, such as audio or video content.<fieldset>:-<fieldset>tag is used to create a group of related elements in a form, as well as to create a box around the elements<figcaption>:- In the<figure>element there is a<figcaption>element used to attach a caption to the image, table, or chart contained within the<figure>element.<figure>:-<figure>symbolizes an element that represents a unit of self-contained content, optionally with a caption, that is normally referred to as a single entity.<footer>:- The<footer>HTML element represents the footer of the sectioning root element or its nearest sectioning content element.<form>:- Using the<form>tag, HTML forms allow users to submit information to a website.<head>:- An<head>tag specifies the head section of a document, which contains document-specific information.<header>:-<header>tag is used to define the page's header, which contains information about the document or section's title and heading.<hgroup>:-<hgroup>tags in HTML represent heading groups and are used to group heading elements, such as headings and subheadings, from<h1>to<h6>.<h1>to<h6>:- To define HTML headings, the heading tags are used.The browser displays headings large and bold by default. Aside from this, the<h1>headings are displayed in the largest font, whereas the<h6>headings are displayed in the smallest font.<hr>:- An HTML page can be divided or separated into sections with the<hr>tag, which stands for horizontal rule or theme break.<html>:- All HTML elements are contained within the<html>tag, which is the root of a HTML document<i>:- HTML uses the<i>tag to display italicized content. This tag is usually used to highlight an important term, phrase, or technical term.<iframe>:- With the iframe tag, another HTML document can be embedded within the current document.<img>:-<img>tags are used to embed images in HTML pages. The HTML pages are linked to the images instead of directly inserting them in the document.<input>:- Forms with<input>tags enable interactive controls. Input fields can be of various types depending on the attribute type<ins>:- A block of inserted text is specified by the<ins>tag in HTML. It signifies that a range of text been added to the document<kbd>:-<kbd>tag refers to the textual part of inline text that represents the user's keyboard, voice, or any other text input device.<label>:- The<label>tag in HTML is used in order to provide improved usability for mouse users, i.e., clicks on the label will toggle the control.<legend>:- The title of the child contents is defined by the legend tag. Legends are parent elements. An element with this tag defines the caption for a<fieldset>.<li>:- A list item is represented by the<li>HTML element. This element must be contained in one of the following parent elements: an ordered list (,an unordered list , or a menu)<link>:- An external resource is linked to the current document using the<link>tag.<main>:- Typically, the<main>element specifies the most important or dominant content within the<body>of a document.<map>:- An image map is defined by the<map>tag. Image maps have clickable areas.<mark>:- A<mark>tag represents text that is marked or highlighted for reference or notation purposes, based on its relevance and importance in the context of the enclosing element.<meta>:- The HTML document's metadata is represented by the<meta>tag. Among the information it contains are the page description, keywords, copyright, the language used, and the author.<meter>:- Measurements within a given range or fractional values are represented by the<meter>element. Alternatively, called a gauge.<nav>:- A<nav>element represents a section of navigational links in a document.. Menus, table of contents, and indexes are a few examples of navigation links.<noscript>:- Using the<noscript>tag, you can provide alternate content for users who don't support scripts in their browsers, or have a browser that doesn't support client-side scripting, or have a browser that doesn't support scripts in any form.<object>:- The<object>tag is an HTML tag and used to display multimedia like audios, videos, images, PDFs, and Flash in web pages.<ol>:- The<ol>tag is for an ordered list, an ordered list can be numerical or alphabetical. Inside the<ol>:-tag you have to make a list<li>of items that will follow the order.<optgroup>:- Within a dropdown list defined by the<select>element, the<optgroup>tag defines a group of options.<option>:- Using the<option>element, you can define an option on a dropdown list defined by the<select>element.<output>:- The<output>:-HTML element is a container element into which a site or app can inject the results of a calculation or the outcome of a user action.<p>:- Paragraph is defined by the<p>tag.Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields.<param>:- Parameters are defined by the<param>tag for an<object>element. It is used for passing parameters to an embedded object<picture>:- The<picture>tag in HTML is used to give flexibility to the web-developers to specify image resources. The<picture>tag contains<source>and<img>tags<pre>:-<pre>tag in HTML are used to describe the block of preformatted text, which preserves formatting characters such as spaces, line breaks, tabs, etc.<progress>:- A progress element indicates how far a task has progressed.Using it, web developers can easily create a progress bar on their websites.<q>:- An inline quotation is marked by the<q>HTML element. The text is surrounded by quotation marks in most browsers today.<rp>:- When a browser does not support ruby annotations, it will use the<rp>element as a fallback parenthesis.<rt>:- The<rt>tag defines a way to explain or pronounce characters in a ruby annotation.<ruby>:-<ruby>is usually used to indicate East Asian characters' pronunciations, and represents small annotations above, below, or next to the base text.<s>:- Using the<s>HTML element, you can render text with a strikethrough or a line through it. Things that are no longer accurate or relevant should be represented in the<s>element<samp>:-<samp>may be used to specify the output sample from a computer program. It's Content is typically displayed using a monospaced font in the browser<script>:- The script tag allows for the insertion of a client-side script (JavaScript).It enables you to insert a script within your HTML document.<section>:- Whenever two headers or footers are required or any other section of the document is needed, the<section>tag is used.<select>:- A list of options is defined by nesting the<option>element within the<select>element.<small>:- If you use the<small>tag, you can reduce the font size by one size smaller than its base size; for instance, from large to small.<source>:- For media elements like<audio>and<video>, the<source>element specifies multiple alternative media resources.<strong>:- Elements with<strong>attributes indicate that their contents are highly important, serious, or urgent. Typically, browsers display the content in bold.<span>:-<span>:- is a generic inline HTML element for phrasing content, which inherently represents nothing. Styles can be applied to it by grouping elements together.<style>:- Style information (CSS) can be defined for a document using the<style>tag.<sub>:-<sub>are used to specify inline text that should be displayed as subscript purely for typographical reasons.<summary>:- A summary, caption, or legend for the disclosure box of a<details>element is specified by the<summary>HTML element. By clicking the<summary>element, you can toggle the open/closed state of the parent *details>` element.<sup>:- Inline text can be displayed as a superscript with the<sup>HTML element only for typographical reasons<svg>:- HTML documents can embed SVG graphics using the<svg>element. With this tag you can define vector graphics in an XML format.<table>:- Tabular data is represented by the<table>:- HTML element, i.e., information contained in a two-dimensional table comprised of rows and columns of cells.<tbody>:- The<tbody>element encapsulates a set of table rows (*tr>), which are associated with the table body (`).
<td>:-<td>tags define a table cell. A table row may consist of more than one<td>element. The default alignment is left in this element.<template>:-<template>are used to define HTML fragments that are not in immediate need of rendering, but can simply be cloned and inserted into documents by JavaScript.<textarea>:- Using the<textarea>tag, a multiline text input control is created within a form.<th>:- Using the<th>:-HTML element, a cell is defined as the header of a group of cells in a table. The scope and headers attributes determine the exact nature of this group.<thead>:- A table's header is defined by the<thead>element .This element is a child of the<table>element along with the<thead>and<tfoot>tags<time>:- Displaying a human-readable date/time is done by using the<time>tag. In addition, date and time can also be encoded.<tr>:- A row can then be constructed by combining<td>(data cells) and<th>(header cells).<track>:- Text tracks such as subtitles and captions can be specified as<track>for<audio>and<video>.<u>:-<u>represent inline text that contains non-textual annotations and should be rendered accordingly.<ul>:- An<ul>:-tag is suitable for elements that do not need to be presented numerically and which can be rearranged without changing the meaning of the list.<var>:- A<var>tag indicates that the text is an example of a variable or program argument.<video>:- A<video>tag is intended for embedding video content into a document, such as a movie clip or a video stream.<wbr>:-<wbr>tags indicate in which part of a text it would be okay to add a line break.