` element specifies a title for the HTML page. * The `<body>` element defines the document's body. * The `<h1>` element defines a large heading. * The `<p>` element defines a paragraph, etc. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1721736153940/f16bb990-085f-4ff7-bf13-5b95b2083182.png align="center") ## HTML Attributes * All HTML elements can have **attributes.** * Attributes provide **additional information** about elements. * Attributes are always specified in **the start tag.** * Attributes usually come in name/value pairs like: **name=”value”.** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1721795623749/6c64787e-df2d-4e0e-b1f4-5838edba072e.jpeg align="center") ### Basic HTML Elements *HTML ELEMENTㅤㅤㅤㅤㅤㅤㅤㅤ ㅤㅤㅤDESCRIPTION* ◼ <html> represents the root (top-level element) of an HTML ㅤㅤ ㅤㅤㅤㅤㅤㅤㅤㅤ document, so it is also referred to as the \*root element.\*ㅤㅤㅤ All other elements must be descendants of this element. ◼ <title> defines the document’s title that is shown in a browser’s ㅤㅤㅤㅤ ㅤㅤㅤ ㅤ title bar. It only contains text. ◼ <head> ㅤㅤ contains machine-readable information (metadata) ㅤㅤㅤㅤ ㅤㅤㅤㅤ ㅤㅤㅤ about the document, like its title, scripts, stylesheets. ◼ <body> represents the content of an HTML document. There ㅤㅤㅤㅤ ㅤㅤㅤ ㅤㅤ can be only one <body> element in a document. This ㅤㅤㅤㅤ ㅤㅤㅤ ㅤㅤ element is a Nested Element this means that elements ㅤㅤㅤㅤ ㅤㅤㅤㅤ can contain other elements. ◼ <style> ㅤㅤㅤ ㅤ contains style information for a document, or part of a ㅤㅤㅤㅤ ㅤㅤㅤㅤ document. It contains CSS, which is applied to the ㅤㅤㅤㅤ ㅤㅤㅤㅤ ㅤㅤ contents of the document. ◼ <link> ㅤㅤㅤㅤ specifies relationships between the current document ㅤㅤㅤㅤ ㅤㅤㅤㅤ & an external resource. This element is most commonly ㅤㅤㅤㅤ ㅤㅤㅤ ㅤ used to link to CSS. ◼ <header> ㅤㅤㅤ ㅤ represents introductory content, It may contain some ㅤㅤㅤㅤ ㅤㅤㅤㅤ heading elements but also a logo, a search form, an ㅤㅤㅤㅤ ㅤㅤㅤㅤ ㅤㅤ author name, and other elements. ◼ <footer> ㅤㅤㅤ ㅤ represents a footer for its nearest ancestor sectioning ㅤㅤㅤㅤㅤㅤㅤㅤ root element. A <footer> typically contains information ㅤㅤㅤㅤㅤㅤㅤ ㅤ about copyright data or links to related documents. ◼ <main>ㅤㅤㅤㅤ represents the dominant content of the ‘body’ of a ㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤ document. The main content area consists of content ㅤㅤㅤㅤㅤㅤㅤㅤ that is directly related to its title of document or the main ㅤㅤㅤㅤㅤㅤㅤ functionality of an application. ◼ <nav>ㅤㅤㅤㅤㅤ represents a section of a page whose purpose is to ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ provide navigation links, either within the current ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ document or to other external documents. some ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ examples of navigation sections are menus and indexes. ◼ <h1> to <h6>ㅤㅤㅤㅤㅤ represent six levels of section headings. ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ h1 > h2 > h3 > h4 > h5 > h6 (Headings size) ◼ <p>ㅤㅤㅤㅤㅤㅤㅤ ㅤ represents a paragraph. HTML paragraphs can be ㅤㅤㅤㅤㅤㅤㅤㅤ ㅤㅤ any structural grouping of related content, such as ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ images or form fields, etc. ◼ <a>ㅤㅤㅤㅤㅤㅤㅤㅤ ㅤ *anchor* element, with [its href attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#attr-href), creates ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ a hyperlink to web pages, files, email addresses, to ㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤ anything a URL can address. ◼ <br> ㅤㅤㅤㅤㅤㅤㅤㅤㅤ produces a ‘line break’ in text. It is useful where ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤ the division of lines is significant. ◼ <section>ㅤㅤㅤㅤ are used for specific section or portion of a document. ◼ <div>ㅤㅤㅤㅤㅤㅤㅤ ㅤ is the generic container for flow content. It has no ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ effect on the content or layout until styled in some ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ way using CSS. ◼ <ol>ㅤㅤㅤㅤㅤㅤ ㅤ represents an ordered list of items — typically ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ rendered as a numbered list. *(1,2,3…)* ◼ <ul>ㅤㅤㅤㅤㅤㅤㅤ represents an unordered list of items, typically ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ rendered as a bulleted list. (◾,◾,◾…) ◼ <li>ㅤㅤㅤㅤㅤㅤㅤ ㅤ used to represent an item in a list. It must be ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ contained in a parent element: an ordered list (<ol>), ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ an unordered list (<ul>), or a menu (menu). In ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ menus and unordered lists, list items are usually ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ displayed using bullet points (⚫). In ordered lists, ㅤㅤㅤㅤㅤㅤㅤㅤㅤ they are usually displayed with an ascending counter ㅤㅤㅤㅤㅤㅤㅤㅤㅤ on the left, such as a number or letter. ◼ <img>ㅤㅤㅤㅤㅤㅤ ㅤ element embeds an image into the document. ◼ <var>ㅤㅤㅤㅤㅤㅤㅤ represents the name of a variable in a mathematical ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ expression or a programming context. ◼ <map>ㅤㅤㅤㅤㅤㅤㅤ is used with area element to define an image ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ map (a clickable link area). ◼ <script>ㅤㅤㅤㅤㅤ ㅤ is used to embed executable code or data; this is ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ typically used to embed or refer to JavaScript ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤ code. ◼<noscript>ㅤㅤㅤㅤㅤ ㅤ defines 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. ◼ <table>ㅤㅤㅤㅤㅤㅤ represents tabular data — that is, information ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ presented in a 2-D table comprised of rows and ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ columns of cells containing data. ◼ <col>ㅤㅤㅤㅤㅤㅤㅤ ㅤ defines a column within a table andㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤ It is generally found within a <colgroup> element. ◼ <td>ㅤㅤㅤㅤㅤㅤㅤㅤㅤ defines a cell of a table that contains data. ◼ <tr>ㅤㅤㅤㅤㅤㅤㅤ defines a row of cells in a table. The row’s cells can ㅤㅤㅤㅤ ㅤㅤㅤㅤㅤ ㅤ then be established using a mix of td & th elements. ◼ <th>ㅤㅤㅤㅤㅤㅤㅤ defines a cell as header of a group of table cells. ◼ <center>ㅤㅤㅤㅤㅤㅤㅤㅤ ㅤ is a block-level element that displays its ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ block-level or inline contents centered ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤ horizontally within its containing element. ◼ <font>ㅤㅤㅤㅤㅤㅤㅤ defines the font size, color and face for its content. ◼ <frame>ㅤㅤㅤㅤㅤㅤㅤ defines a particular area in which another HTML ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ document can be displayed. ◼ <marquee> ㅤㅤㅤㅤㅤㅤ is used to insert a scrolling area of text. You ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ can control what happens when the text reaches ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ the edges of its content area using its attributes. ◼ <form>ㅤㅤㅤㅤㅤㅤㅤㅤ represents a document section containing ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤ interactive controls for submitting information. ◼ <input> ㅤㅤㅤㅤㅤㅤㅤ ㅤ is used to create interactive controls for web-ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ based forms in order to accept data from the ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤ user; a wide variety of types of input data are ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤavailable. ◼ <label>ㅤㅤㅤㅤㅤㅤㅤ ㅤ represents a caption for an item in a user ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤ interface. ◼ <option>ㅤㅤㅤㅤㅤㅤㅤ ㅤ is used to define an item contained in a ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ select or a datalist element. ◼ <select>ㅤㅤㅤㅤㅤㅤㅤ ㅤrepresents a control that provides a menu of ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤ options. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1721975332616/34819719-7400-4c7b-a0d4-1ebc2acaca96.jpeg align="center")

# HTML Elements An **HTML Element** a collection of start and end tags with the content inserted between them. HTML elements are building blocks of web pages, representing different types of content such as **headings**, **paragraphs**, **links**, and **images**. An HTML element can be defined by ‘***<start-tag>some content</end-tag>****’.* For Example : * The `` element is the root element of an HTML page. * The `` element contains meta information about the HTML page. * The `` element specifies a title for the HTML page. * The `<body>` element defines the document's body. * The `<h1>` element defines a large heading. * The `<p>` element defines a paragraph, etc. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1721736153940/f16bb990-085f-4ff7-bf13-5b95b2083182.png align="center") ## HTML Attributes * All HTML elements can have **attributes.** * Attributes provide **additional information** about elements. * Attributes are always specified in **the start tag.** * Attributes usually come in name/value pairs like: **name=”value”.** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1721795623749/6c64787e-df2d-4e0e-b1f4-5838edba072e.jpeg align="center") ### Basic HTML Elements *HTML ELEMENTㅤㅤㅤㅤㅤㅤㅤㅤ ㅤㅤㅤDESCRIPTION* ◼ <html> represents the root (top-level element) of an HTML ㅤㅤ ㅤㅤㅤㅤㅤㅤㅤㅤ document, so it is also referred to as the \*root element.\*ㅤㅤㅤ All other elements must be descendants of this element. ◼ <title> defines the document’s title that is shown in a browser’s ㅤㅤㅤㅤ ㅤㅤㅤ ㅤ title bar. It only contains text. ◼ <head> ㅤㅤ contains machine-readable information (metadata) ㅤㅤㅤㅤ ㅤㅤㅤㅤ ㅤㅤㅤ about the document, like its title, scripts, stylesheets. ◼ <body> represents the content of an HTML document. There ㅤㅤㅤㅤ ㅤㅤㅤ ㅤㅤ can be only one <body> element in a document. This ㅤㅤㅤㅤ ㅤㅤㅤ ㅤㅤ element is a Nested Element this means that elements ㅤㅤㅤㅤ ㅤㅤㅤㅤ can contain other elements. ◼ <style> ㅤㅤㅤ ㅤ contains style information for a document, or part of a ㅤㅤㅤㅤ ㅤㅤㅤㅤ document. It contains CSS, which is applied to the ㅤㅤㅤㅤ ㅤㅤㅤㅤ ㅤㅤ contents of the document. ◼ <link> ㅤㅤㅤㅤ specifies relationships between the current document ㅤㅤㅤㅤ ㅤㅤㅤㅤ & an external resource. This element is most commonly ㅤㅤㅤㅤ ㅤㅤㅤ ㅤ used to link to CSS. ◼ <header> ㅤㅤㅤ ㅤ represents introductory content, It may contain some ㅤㅤㅤㅤ ㅤㅤㅤㅤ heading elements but also a logo, a search form, an ㅤㅤㅤㅤ ㅤㅤㅤㅤ ㅤㅤ author name, and other elements. ◼ <footer> ㅤㅤㅤ ㅤ represents a footer for its nearest ancestor sectioning ㅤㅤㅤㅤㅤㅤㅤㅤ root element. A <footer> typically contains information ㅤㅤㅤㅤㅤㅤㅤ ㅤ about copyright data or links to related documents. ◼ <main>ㅤㅤㅤㅤ represents the dominant content of the ‘body’ of a ㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤ document. The main content area consists of content ㅤㅤㅤㅤㅤㅤㅤㅤ that is directly related to its title of document or the main ㅤㅤㅤㅤㅤㅤㅤ functionality of an application. ◼ <nav>ㅤㅤㅤㅤㅤ represents a section of a page whose purpose is to ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ provide navigation links, either within the current ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ document or to other external documents. some ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ examples of navigation sections are menus and indexes. ◼ <h1> to <h6>ㅤㅤㅤㅤㅤ represent six levels of section headings. ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ h1 > h2 > h3 > h4 > h5 > h6 (Headings size) ◼ <p>ㅤㅤㅤㅤㅤㅤㅤ ㅤ represents a paragraph. HTML paragraphs can be ㅤㅤㅤㅤㅤㅤㅤㅤ ㅤㅤ any structural grouping of related content, such as ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ images or form fields, etc. ◼ <a>ㅤㅤㅤㅤㅤㅤㅤㅤ ㅤ *anchor* element, with [its href attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#attr-href), creates ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ a hyperlink to web pages, files, email addresses, to ㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤ anything a URL can address. ◼ <br> ㅤㅤㅤㅤㅤㅤㅤㅤㅤ produces a ‘line break’ in text. It is useful where ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤ the division of lines is significant. ◼ <section>ㅤㅤㅤㅤ are used for specific section or portion of a document. ◼ <div>ㅤㅤㅤㅤㅤㅤㅤ ㅤ is the generic container for flow content. It has no ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ effect on the content or layout until styled in some ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ way using CSS. ◼ <ol>ㅤㅤㅤㅤㅤㅤ ㅤ represents an ordered list of items — typically ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ rendered as a numbered list. *(1,2,3…)* ◼ <ul>ㅤㅤㅤㅤㅤㅤㅤ represents an unordered list of items, typically ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ rendered as a bulleted list. (◾,◾,◾…) ◼ <li>ㅤㅤㅤㅤㅤㅤㅤ ㅤ used to represent an item in a list. It must be ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ contained in a parent element: an ordered list (<ol>), ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ an unordered list (<ul>), or a menu (menu). In ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ menus and unordered lists, list items are usually ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ displayed using bullet points (⚫). In ordered lists, ㅤㅤㅤㅤㅤㅤㅤㅤㅤ they are usually displayed with an ascending counter ㅤㅤㅤㅤㅤㅤㅤㅤㅤ on the left, such as a number or letter. ◼ <img>ㅤㅤㅤㅤㅤㅤ ㅤ element embeds an image into the document. ◼ <var>ㅤㅤㅤㅤㅤㅤㅤ represents the name of a variable in a mathematical ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ expression or a programming context. ◼ <map>ㅤㅤㅤㅤㅤㅤㅤ is used with area element to define an image ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ map (a clickable link area). ◼ <script>ㅤㅤㅤㅤㅤ ㅤ is used to embed executable code or data; this is ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ typically used to embed or refer to JavaScript ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤ code. ◼<noscript>ㅤㅤㅤㅤㅤ ㅤ defines 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. ◼ <table>ㅤㅤㅤㅤㅤㅤ represents tabular data — that is, information ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ presented in a 2-D table comprised of rows and ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ columns of cells containing data. ◼ <col>ㅤㅤㅤㅤㅤㅤㅤ ㅤ defines a column within a table andㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤ It is generally found within a <colgroup> element. ◼ <td>ㅤㅤㅤㅤㅤㅤㅤㅤㅤ defines a cell of a table that contains data. ◼ <tr>ㅤㅤㅤㅤㅤㅤㅤ defines a row of cells in a table. The row’s cells can ㅤㅤㅤㅤ ㅤㅤㅤㅤㅤ ㅤ then be established using a mix of td & th elements. ◼ <th>ㅤㅤㅤㅤㅤㅤㅤ defines a cell as header of a group of table cells. ◼ <center>ㅤㅤㅤㅤㅤㅤㅤㅤ ㅤ is a block-level element that displays its ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ block-level or inline contents centered ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤ horizontally within its containing element. ◼ <font>ㅤㅤㅤㅤㅤㅤㅤ defines the font size, color and face for its content. ◼ <frame>ㅤㅤㅤㅤㅤㅤㅤ defines a particular area in which another HTML ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ document can be displayed. ◼ <marquee> ㅤㅤㅤㅤㅤㅤ is used to insert a scrolling area of text. You ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ can control what happens when the text reaches ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ the edges of its content area using its attributes. ◼ <form>ㅤㅤㅤㅤㅤㅤㅤㅤ represents a document section containing ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤ interactive controls for submitting information. ◼ <input> ㅤㅤㅤㅤㅤㅤㅤ ㅤ is used to create interactive controls for web-ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ based forms in order to accept data from the ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤ user; a wide variety of types of input data are ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤavailable. ◼ <label>ㅤㅤㅤㅤㅤㅤㅤ ㅤ represents a caption for an item in a user ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤ interface. ◼ <option>ㅤㅤㅤㅤㅤㅤㅤ ㅤ is used to define an item contained in a ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ select or a datalist element. ◼ <select>ㅤㅤㅤㅤㅤㅤㅤ ㅤrepresents a control that provides a menu of ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤ options. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1721975332616/34819719-7400-4c7b-a0d4-1ebc2acaca96.jpeg align="center")