Scribd
Upload
3 views

What is HTML

HTML description

Uploaded by

erimasharma1702
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

What is HTML

HTML description

Uploaded by

erimasharma1702
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

What is HTML?

HTML (HyperText Markup Language) is the standard markup


language used to create web pages. It provides the structure of a
webpage, allowing developers to define elements such as headings,
paragraphs, links, images, and other content. HTML uses a system of
tags to delineate different parts of the content, making it possible for
browsers to render the page correctly.

HTML Boilerplate
An HTML boilerplate is a basic template for an HTML document that
includes the essential elements needed to create a web page. It
serves as a starting point for web development. Below is a simple
example of an HTML boilerplate:

1. DOCTYPE Declaration:

• The <!DOCTYPE html> declaration defines the document type and version of HTML
being used. It helps the browser render the page correctly.

• Example:

1<!DOCTYPE html>

2. HTML Element:

• The <html> tag is the root element of the HTML document. It wraps all other
elements and can include a lang attribute to specify the language of the document.

• Example:
1<html lang="en">

3. Head Section:

• The <head> section contains meta-information about the document, such as the
title, character set, viewport settings, and links to stylesheets or scripts.

• Common elements within the <head> include:

• <meta charset="UTF-8">: Specifies the character encoding.

• <meta name="viewport" content="width=device-width, initial-scale=1.0">:


Ensures proper scaling on mobile devices.

• <title>: Sets the title of the webpage, which appears in the browser tab.

• <link>: Links to external stylesheets.

• <script>: Links to external JavaScript files or includes inline scripts.

4. Body Section:

• The <body> section contains the actual content of the webpage, including text,
images, links, and other elements that users interact with.

• This is where you will place your headings, paragraphs, lists, images, and other
content.

5. Footer Section (optional):

• While not always included in the boilerplate, a footer can be added to provide
additional information, such as copyright notices or links to privacy policies.

Key Components Explained

• DOCTYPE Declaration: Ensures the browser knows to render the document as HTML5.

• <html lang="en">: Indicates that the content is in English, which is important for accessibility
and SEO.

• Meta Tags: Provide essential information for browsers and search engines, improving the
page's performance and discoverability.

• Title Tag: Crucial for SEO and user experience, as it appears in search results and browser
tabs.

• Link to CSS: Allows for styling the webpage, separating content from presentation.

• Script Tag: Links to JavaScript files, enabling interactivity on the webpage.

• Header, Main, and Footer: These semantic elements help structure the content logically,
improving accessibility and SEO.

• HTML Tags
• HTML tags are the building blocks of HTML. They are used to create
elements and are typically enclosed in angle brackets. Most tags come in
pairs: an opening tag and a closing tag. The opening tag indicates the start of
an element, while the closing tag indicates the end of that element. The
closing tag is similar to the opening tag but includes a forward slash ( /) before
the tag name.

Example----

<p>This is a paragraph.</p>

2<a href="https://www.example.com">This is a link.</a>

HTML Elements
HTML elements are the complete set of tags and the content they
contain. An element consists of an opening tag, content, and a
closing tag. Some elements are self-closing and do not require a
closing tag (e.g., <img>).
Example of HTML Elements
1. Paragraph Element
<p>This is a paragraph element.</p>
1. List Element
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
1. Structural Tags
• <html>: Root element of an HTML page.
• <head>: Contains meta-information about the document.
• <title>: Sets the title of the document.
• <body>: Contains the content of the document.
2. Metadata Tags
• <meta>: Provides metadata about the HTML document.
• <link>: Links to external resources (like stylesheets).
• <style>: Contains internal CSS styles.
• <script>: Links to or contains JavaScript.
3. Content Tags
• <h1> to <h6>: Header tags, with <h1> being the highest
level.
• <p>: Paragraph tag.
• <a>: Anchor tag for hyperlinks.
• <img>: Image tag.
• <ul>: Unordered list.
• <ol>: Ordered list.
• <li>: List item.
• <div>: Division or section in a document.
• <span>: Inline container for text.
• <table>: Table element.
• <tr>: Table row.
• <td>: Table data cell.
• <th>: Table header cell.
• <form>: Form for user input.
• <input>: Input field.
• <button>: Button element.
• <label>: Label for an input element.
• <textarea>: Multi-line text input.
• <select>: Dropdown list.
• <option>: Option in a dropdown list.
4. Semantic Tags
Semantic tags are HTML elements that convey meaning
about the content they contain. They help to describe the structure
and purpose of the content, making it easier for both browsers and
developers to understand the layout and function of a webpage.
Semantic tags improve accessibility, search engine optimization
(SEO), and maintainability of the code.
Examples of Semantic Tags
1. <header>: Represents introductory content or a set of
navigational links.

• <header>: Represents introductory content.


• <nav>: Navigation links.
• <main>: Main content of the document.
• <article>: Independent content.
• <section>: Thematic grouping of content.
• <aside>: Content related to the main content (like
sidebars).
• <footer>: Footer for the document or section.
• <figure>: Self-contained content, like images with
captions.
• <figcaption>: Caption for a <figure> element.
5. Interactive Tags
• <details>: Disclosure widget from which the user can
obtain additional information.
• <summary>: Summary for a <details> element.
• <dialog>: Represents a dialog box or other interactive
component.
6. Media Tags
• <audio>: Embeds sound content.
• <video>: Embeds video content.
• <source>: Specifies multiple media resources
for <audio> and `
▪ DIFF BETWEEN HTML TAG & ELEMENTS—
▪ HTML Tag
▪ An HTML tag is a markup construct that defines the start and
end of an HTML element. Tags are enclosed in angle brackets (<
>). Most HTML tags come in pairs: an opening tag and a closing
tag. The opening tag indicates the beginning of an element,
while the closing tag indicates the end of that element. The
closing tag is similar to the opening tag but includes a forward
slash (/) before the tag name.
▪ Example of HTML Tags
▪ Opening Tag: <p>
▪ Closing Tag: </p>
▪ In this example, <p> is the opening tag for a paragraph,
and </p> is the closing tag.
▪ HTML Element
▪ An HTML element is a complete structure that consists of an
opening tag, content, and a closing tag. An element can also be
self-closing, meaning it does not have a closing tag. The
element represents a part of the content on the webpage.
▪ Example of HTML Elements
▪ Paragraph Element:
▪ html
▪ VerifyOpen In EditorRunCopy code
▪ 1<p>This is a paragraph.</p>
▪ Opening Tag: <p>
▪ Content: This is a paragraph.
▪ Closing Tag: </p>
▪ Complete Element: <p>This is a paragraph.</p>
▪

You might also like