- HTML provides a wide range of elements and attributes to - create semantic, accessible, and interactive web pages. - This section covers HTML topics that helps you build - more structured and dynamic content. -
- -<header>,
- <footer>,
- <article>,
- <section>,
- <nav>, <aside>
- <header>: Represents
- introductory content or navigational
- links.
- id,
- class,
- style.
- <footer>: Represents
- the footer of a document or section.
- <article>: Defines
- independent, self-contained content
- (e.g., blog post).
- <section>: Represents
- a standalone section of content.
- <nav>: Defines a set
- of navigation links.
- <aside>: Represents
- content tangentially related to the main
- content (e.g., sidebar).
- <header> and
- <footer> define the top and
- bottom of a page or section, while
- <article> and
- <section> organize content
- logically. <nav> is used for
- navigation menus, and
- <aside> for secondary
- content. These tags improve accessibility for
- screen readers and search engine indexing by
- providing meaningful structure.
- required, pattern,
- min, max
- required: Makes an input
- field mandatory.
- <input>,
- <select>,
- <textarea>.
- pattern: Specifies a
- regular expression the input must match.
- <input> with
- types like text,
- email,
- tel.
- min: Sets the minimum value
- for numeric or date inputs.
- <input> types
- like number,
- range,
- date.
- max: Sets the maximum value
- for numeric or date inputs.
- <input> types
- like number,
- range,
- date.
- required attribute prevents form
- submission if the field is empty.
- pattern enforces specific formats
- (e.g., a phone number pattern like
- "\d{3}-\d{3}-\d{4}"). min and
- max restrict input ranges, such as
- limiting a number input to 1-100 or a date to a
- specific range. These attributes reduce the need
- for JavaScript validation, enhancing user
- experience.
- <email>,
- <tel>, <date>,
- <number>
- <input type="email">:
- For email addresses.
- value:
- Default email (e.g.,
- "user@example.com").
- placeholder: Hint text (e.g.,
- "Enter your email").
- required:
- Makes input mandatory.
- pattern:
- Custom regex (e.g.,
- "[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$").
- multiple:
- Allows multiple emails,
- separated by commas
- (boolean).
- <input type="tel">:
- For telephone numbers.
- value:
- Default phone number
- (e.g., "123-456-7890").
- placeholder: Hint text (e.g.,
- "Enter your phone").
- required:
- Makes input mandatory.
- pattern:
- Custom regex (e.g.,
- "\d{3}-\d{3}-\d{4}").
- <input type="date">:
- For selecting dates.
- value:
- Default date (e.g.,
- "2023-01-01").
- min:
- Earliest date (e.g.,
- "2023-01-01").
- max: Latest
- date (e.g.,
- "2025-12-31").
- required:
- Makes input mandatory.
- <input type="number">: For numeric input.
- value:
- Default number (e.g.,
- "10").
- min:
- Minimum value (e.g.,
- "1").
- max:
- Maximum value (e.g.,
- "100").
- step:
- Increment value (e.g.,
- "1", "0.1").
- required:
- Makes input mandatory.
- email validates email formats,
- tel accepts phone numbers (with
- custom patterns), date offers a
- calendar picker, and
- number includes a spinner for
- numeric values. Attributes like
- min, max, and
- step enhance control over user
- input, improving form usability.
- <a> tag.
- <a> Tag:
- href: Specifies the
- URL (e.g., "https://example.com"
- for external, "/page.html" for
- internal).
- target: Defines
- where to open the link (e.g.,
- "_self", "_blank", "_parent",
- "_top").
- rel: Relationship
- with the linked resource (e.g.,
- "nofollow", "noopener",
- "noreferrer").
- download: Prompts
- download of the resource (e.g.,
- "filename.pdf").
- title: Tooltip text
- (e.g., "Visit our site").
- <a
- href="/about.html">About</a>).
- <a
- href="https://example.com">Example</a>).
- target="_blank" attribute opens
- links in a new tab, and
- rel="noopener" enhances security
- for external links. The
- download attribute facilitates file
- downloads, and title improves
- accessibility.
- <a href="#section">)
- <a href="#section">Go to
- Section</a>
- <section
- id="section">Content</section>
- href: References the
- section ID with a "#" prefix (e.g.,
- "#section").
- id: Unique identifier for
- the target element (e.g., "section").
- href attribute with a "#"
- followed by the target element's
- id. This enables smooth navigation
- within long pages (e.g., table of contents). For
- cross-page linking, use
- <a href="page.html#section">.
- CSS can enhance the experience with smooth
- scrolling (scroll-behavior: smooth).
- <video>,
- <audio>)
- <video>: Embeds video content.
- src: Video file URL
- (e.g., "video.mp4").
- controls: Shows
- playback controls (boolean).
- autoplay:
- Automatically plays the video
- (boolean).
- loop: Loops the
- video (boolean).
- muted: Mutes the
- video (boolean).
- poster: Image to
- display before playback (e.g.,
- "poster.jpg").
- width: Video width
- (e.g., "640").
- height: Video
- height (e.g., "360").
- <audio>: Embeds audio content.
- src: Audio file URL
- (e.g., "audio.mp3").
- controls: Shows
- playback controls (boolean).
- autoplay:
- Automatically plays the audio
- (boolean).
- loop: Loops the
- audio (boolean).
- muted: Mutes the
- audio (boolean).
- <video> and
- <audio> tags embed media
- directly in the page. The
- controls attribute provides a
- browser-native player, while
- autoplay, loop, and
- muted control playback behavior.
- For <video>, the
- poster attribute sets a preview
- image. Use <source> inside
- these tags to provide multiple formats (e.g.,
- MP4, WebM) for broader compatibility.
- controls attribute.
- video.play(),
- video.pause()).
-
- <video id="myVideo" src="video.mp4"></video>
- <div class="custom-controls">
- <button onclick="document.getElementById('myVideo').play()">Play</button>
- <button onclick="document.getElementById('myVideo').pause()">Pause</button>
- </div>
-
- controls attribute,
- you can design your own interface with HTML/CSS.
- JavaScript interacts with the media element
- through methods like play(),
- pause(), and properties like
- currentTime or volume.
- This approach is useful for advanced
- applications but requires additional development
- effort.
- <label> Tag for
- Accessibility
- <label>: Associates a text label with an input field.
- for: Connects to the
- id of the input (e.g.,
- <label for="email">).
- - <label for="email">Email:</label> - <input type="email" id="email" /> --
label element enhances usability
- and accessibility by helping screen readers
- understand the purpose of input fields. Clicking
- a label also focuses the linked input.
- + HTML provides a wide range of elements and attributes to + create semantic, accessible, and interactive web pages. + This section covers HTML topics that helps you build + more structured and dynamic content. +
-<button> Tag and Its Types
- type: Can be "submit",
- "reset", or "button".
- disabled: Disables the
- button (boolean).
- name, value:
- Form data identifiers.
- type="submit" to send form data,
- type="reset" to clear inputs, and
- type="button" for
- JavaScript-triggered actions. Buttons are
- essential for interaction and control in UI
- design.
- <header>,
+ <footer>,
+ <article>,
+ <section>,
+ <nav>, <aside>
+ <header>: Represents
+ introductory content or navigational
+ links.
+ id,
+ class,
+ style.
+ <footer>: Represents
+ the footer of a document or section.
+ <article>: Defines
+ independent, self-contained content
+ (e.g., blog post).
+ <section>: Represents
+ a standalone section of content.
+ <nav>: Defines a set
+ of navigation links.
+ <aside>: Represents
+ content tangentially related to the main
+ content (e.g., sidebar).
+ <header> and
+ <footer> define the top and
+ bottom of a page or section, while
+ <article> and
+ <section> organize content
+ logically. <nav> is used for
+ navigation menus, and
+ <aside> for secondary
+ content. These tags improve accessibility for
+ screen readers and search engine indexing by
+ providing meaningful structure.
+ required, pattern,
+ min, max
+ required: Makes an input
+ field mandatory.
+ <input>,
+ <select>,
+ <textarea>.
+ pattern: Specifies a
+ regular expression the input must match.
+ <input> with
+ types like text,
+ email,
+ tel.
+ min: Sets the minimum value
+ for numeric or date inputs.
+ <input> types
+ like number,
+ range,
+ date.
+ max: Sets the maximum value
+ for numeric or date inputs.
+ <input> types
+ like number,
+ range,
+ date.
+ <label> usage linked to inputs
- for name, email, and message. Style the labels for
- readability. Add a <button> to
- your form and demonstrate the difference between
- type="submit",
- type="reset", and
- type="button".
+ Explanation: The
+ required attribute prevents form
+ submission if the field is empty.
+ pattern enforces specific formats
+ (e.g., a phone number pattern like
+ "\d{3}-\d{3}-\d{4}"). min and
+ max restrict input ranges, such as
+ limiting a number input to 1-100 or a date to a
+ specific range. These attributes reduce the need
+ for JavaScript validation, enhancing user
+ experience.
<email>,
+ <tel>, <date>,
+ <number>
<input type="email">:
+ For email addresses.
+ value:
+ Default email (e.g.,
+ "user@example.com").
+ placeholder: Hint text (e.g.,
+ "Enter your email").
+ required:
+ Makes input mandatory.
+ pattern:
+ Custom regex (e.g.,
+ "[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$").
+ multiple:
+ Allows multiple emails,
+ separated by commas
+ (boolean).
+ <input type="tel">:
+ For telephone numbers.
+ value:
+ Default phone number
+ (e.g., "123-456-7890").
+ placeholder: Hint text (e.g.,
+ "Enter your phone").
+ required:
+ Makes input mandatory.
+ pattern:
+ Custom regex (e.g.,
+ "\d{3}-\d{3}-\d{4}").
+ <input type="date">:
+ For selecting dates.
+ value:
+ Default date (e.g.,
+ "2023-01-01").
+ min:
+ Earliest date (e.g.,
+ "2023-01-01").
+ max: Latest
+ date (e.g.,
+ "2025-12-31").
+ required:
+ Makes input mandatory.
+ <input type="number">: For numeric input.
+ value:
+ Default number (e.g.,
+ "10").
+ min:
+ Minimum value (e.g.,
+ "1").
+ max:
+ Maximum value (e.g.,
+ "100").
+ step:
+ Increment value (e.g.,
+ "1", "0.1").
+ required:
+ Makes input mandatory.
+ email validates email formats,
+ tel accepts phone numbers (with
+ custom patterns), date offers a
+ calendar picker, and
+ number includes a spinner for
+ numeric values. Attributes like
+ min, max, and
+ step enhance control over user
+ input, improving form usability.
+ <a> tag.
+ <a> Tag:
+ href: Specifies the
+ URL (e.g., "https://example.com"
+ for external, "/page.html" for
+ internal).
+ target: Defines
+ where to open the link (e.g.,
+ "_self", "_blank", "_parent",
+ "_top").
+ rel: Relationship
+ with the linked resource (e.g.,
+ "nofollow", "noopener",
+ "noreferrer").
+ download: Prompts
+ download of the resource (e.g.,
+ "filename.pdf").
+ title: Tooltip text
+ (e.g., "Visit our site").
+ <a
+ href="/about.html">About</a>).
+ <a
+ href="https://example.com">Example</a>).
+ target="_blank" attribute opens
+ links in a new tab, and
+ rel="noopener" enhances security
+ for external links. The
+ download attribute facilitates file
+ downloads, and title improves
+ accessibility.
+ <a href="#section">)
<a href="#section">Go to
+ Section</a>
+ <section
+ id="section">Content</section>
+ href: References the
+ section ID with a "#" prefix (e.g.,
+ "#section").
+ id: Unique identifier for
+ the target element (e.g., "section").
+ href attribute with a "#"
+ followed by the target element's
+ id. This enables smooth navigation
+ within long pages (e.g., table of contents). For
+ cross-page linking, use
+ <a href="page.html#section">.
+ CSS can enhance the experience with smooth
+ scrolling (scroll-behavior: smooth).
+ <video>,
+ <audio>)
<video>: Embeds video content.
+ src: Video file URL
+ (e.g., "video.mp4").
+ controls: Shows
+ playback controls (boolean).
+ autoplay:
+ Automatically plays the video
+ (boolean).
+ loop: Loops the
+ video (boolean).
+ muted: Mutes the
+ video (boolean).
+ poster: Image to
+ display before playback (e.g.,
+ "poster.jpg").
+ width: Video width
+ (e.g., "640").
+ height: Video
+ height (e.g., "360").
+ <audio>: Embeds audio content.
+ src: Audio file URL
+ (e.g., "audio.mp3").
+ controls: Shows
+ playback controls (boolean).
+ autoplay:
+ Automatically plays the audio
+ (boolean).
+ loop: Loops the
+ audio (boolean).
+ muted: Mutes the
+ audio (boolean).
+ <video> and
+ <audio> tags embed media
+ directly in the page. The
+ controls attribute provides a
+ browser-native player, while
+ autoplay, loop, and
+ muted control playback behavior.
+ For <video>, the
+ poster attribute sets a preview
+ image. Use <source> inside
+ these tags to provide multiple formats (e.g.,
+ MP4, WebM) for broader compatibility.
+ controls attribute.
+ video.play(),
+ video.pause()).
+
+ <video id="myVideo" src="video.mp4"></video>
+ <div class="custom-controls">
+ <button onclick="document.getElementById('myVideo').play()">Play</button>
+ <button onclick="document.getElementById('myVideo').pause()">Pause</button>
+ </div>
+
+ controls attribute,
+ you can design your own interface with HTML/CSS.
+ JavaScript interacts with the media element
+ through methods like play(),
+ pause(), and properties like
+ currentTime or volume.
+ This approach is useful for advanced
+ applications but requires additional development
+ effort.
+ <label> Tag for
+ Accessibility
+ <label>: Associates a text label with an input field.
+ for: Connects to the
+ id of the input (e.g.,
+ <label for="email">).
+ + <label for="email">Email:</label> + <input type="email" id="email" /> ++
label element enhances usability
+ and accessibility by helping screen readers
+ understand the purpose of input fields. Clicking
+ a label also focuses the linked input.
+ <button> Tag and Its Types
+ type: Can be "submit",
+ "reset", or "button".
+ disabled: Disables the
+ button (boolean).
+ name, value:
+ Form data identifiers.
+ type="submit" to send form data,
+ type="reset" to clear inputs, and
+ type="button" for
+ JavaScript-triggered actions. Buttons are
+ essential for interaction and control in UI
+ design.
+ <label> usage linked to inputs
+ for name, email, and message. Style the labels for
+ readability. Add a <button> to
+ your form and demonstrate the difference between
+ type="submit",
+ type="reset", and
+ type="button".
+