2. HTML
• HTML stands for HyperText Markup Language.
• It is the standard language used to create and structure content on the
web.
• It tells the web browser how to display text, links, images, and other forms
of multimedia on a webpage. HTML sets up the basic structure of a
website, and then CSS and JavaScript add style and interactivity to make
it look and function better.
4. HTML Elements
• An HTML Element consists of a start tag, content, and an end
tag, which together define the element’s structure and
functionality.
• Elements are the basic building blocks of a webpage and can
represent different types of content, such as text, links, images,
or headings.
• In HTML, elements are broadly categorized into two main types
based on how they display in the document layout: block-level
elements and inline elements.
5. • 1. Block-Level Elements – Block-level elements typically start
on a new line and take up the full width available to them,
regardless of their actual content width. This means they stack
vertically and can contain other block-level elements as well as
inline elements. Here are some examples of block-level
elements:
• <div>: A general-purpose container for other elements.
• <p>: Defines a paragraph.
• <h1>, <h2>, …, <h6>: Heading elements of different levels.
• <ol>, <ul>: Ordered and unordered lists.
• <table>: Defines a table.
6. • <form>: Used for HTML forms to collect user inputs.
• <section>, <article>, <nav>, <aside>, <header>, <footer>:
Semantic elements that define areas of a webpage.
• 2. Inline Elements – Inline elements do not start on a new line;
they appear on the same line as adjacent content, as long as
there is space.
• They only take up as much width as their content requires.
Inline elements are typically used within block-level elements to
add content or style.
• Here are some examples of inline elements:
7. • Examples:
• <span>: A general-purpose inline container for phrasing
content.
• <a>: Creates hyperlinks.
• <img>: Embeds an image.
• <strong>, <b>: Used for strong emphasis and bold text,
respectively.
• <em>, <i>: Used for emphasis and italic text, respectively.
• <br>: Inserts a line break within text.
• <input>: Creates interactive controls for forms.
8. HTML Headings
• HTML headings are used to define the titles and subtitles of
sections on a webpage. They help organize the content and
create a structure that is easy to navigate.
• Levels of HTML Heading Tags
• HTML offers six levels of heading tags, each serving a
different purpose in structuring your content:
• Note: the ‘h’ inside the tag should always be in lowercase.
10. HTML DOCTYPE Declaration
• HTML DOCTYPE (Document Type Declaration) is an
instruction that appears at the beginning of an HTML
document, before the <html> tag.
• Its primary role is to tell the web browser which version of
HTML the page is written in, ensuring that the browser
renders the content correctly. It is not an HTML tag, but
rather a special instruction that specifies how the browser
should interpret the HTML.
• Syntax:
• < !DOCTYPE html >
11. HTML Paragraphs
• A paragraph in HTML is simply a block of text enclosed
within the <p> tag.
• The <p> tag helps divide content into manageable, readable
sections. It’s the go-to element for wrapping text in a web
page that is meant to be displayed as a distinct paragraph.
• Syntax:
• <p>Content</p>
12. • The <br> tag
• The HTML <br> tag element creates a line break, giving you a
new line without starting a new paragraph.
• Use <br> when you want to move to the next line without
beginning a whole new paragraph.
• Syntax:
• <br>
• Example:
13. HTML Links Hyperlinks
• HTML Links, also known as hyperlinks, are defined by
the <a> tag in HTML, which stands for “anchor.”
• These links are essential for navigating between web pages
and directing users to different sites, documents, or sections
within the same page.
• The basic attributes of the <a> tag include href, title, and targt,
among others.
• Basic Syntax of an HTML Link:
• <a href="https://www.example.com">Visit Example</a>
14. • By default, links will appear as follows in all browsers:
• An unvisited link is underlined and blue.
• A visited link is underlined and purple.
• An active link is underlined and red.
• HTML Links – Target Attribute
• The target attribute in the <a> tag specifies where to open the
linked document. It controls whether the link opens in the same
window, a new window, or a specific frame.
• _blank: Opens the linked document in a new window or tab.
• _self: Opens the linked document in the same frame or window
as the link. (Default behavior)
15. HTML Images
• The HTML <img> tag is used to embed an image in web pages
by linking them. It creates a placeholder for the image, defined
by attributes like src, width, height, and alt, and does not require
a closing tag.
• There are two ways to insert the images into a webpage:
• By providing a full path or address (URL) to access an internet
file.
• By providing the file path relative to the location of the current
web page file.
• Basic Example of the <img> Tag:
16. Semantic Elements
• Here are some of the fundamental HTML5 semantic elements
that you should use to structure your web content:
• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
18. • 1. The <article> Tag
• The <article> tag is used for content that stands alone and can
be independently distributed or reused, such as a blog post or
news article.
• Example:
• 2. The <aside> Tag
• It is used to place content in a sidebar i.e. aside from the
existing content. It is related to surrounding content.
• Example:
19. • 3. The Details and Summary Tag
• The “details” defines additional details that the user can hide or
view. “summary” defines a visible heading for a “details”
element.
• Example:
• 4. The Figure and Figcaption Tag
• These are used to add an image to a web page with a small
description.
• Example:
20. • 5. The Header Tag
• As the name suggests, it is for the header of a section
introductory of a page. There can be multiple headers on a
page.
• Example:
• 6. The Footer Tag
• Footer located at the bottom of any article or document, they
can contain contact details, copyright information etc. There can
be multiple footers on a page.
• Example: The below example shows the implementation of the
Footer.
• Example:
21. • 7. The Main Tag
• It defines the main content of the document. The content inside
the main tag should be unique.
• Example:
• 8. The Section Tag
• A page can be split into sections like Introduction, Contact
Information, Details, etc and each of these sections can be in a
different section tag.
• Example:
22. • 9. The nav Tag
• It is used to define a set of navigation links in the form of a
navigation bar or nav menu.
• Example: The below example shows the implementation of the
nav tag.:
• 10. The Mark Tag
• It is used to highlight the text.
• Example:
