BASICS OF HTML!


HTML TAGS

There are almost 142 tags in HTML5, the latest version. These tags serve various purposes, including structuring content, embedding media, and enhancing interactivity on web pages.Now we don't need to learn all of them we only need few important ones to get started with HTMl and start making our own HTML website like this one now remember that HTML website are not going to be pretty by any means we can make them look some what pretty but not on industry level that is required now if you think you can land a job by HTML alone than goodluck with that because it's not happening, why you ask because

  1. HTML is an easy language even a kid can learn it and master it
  2. AI
  3. AI
  4. you guessed it AI
All the code that I have written to make this website can easily be written in chatgpt or any other AI like chatgpt iam sure you know or use some of them yourself so if you want to become a successfull webdeveloper you need to know about CSS and JS then you need to learn frameworks like React,Next.js,etc to name a few so now lets see some important tags


HTML Tags and their uses

  1. Structural Tags:
    TAGS USES
    <!Doctype> used to decide document type and html version
    <html> Stores body and head
    <head> contains metadata title of the page and link to style sheets and js script this things are generally not shown to the users
    <body> contain all the content which is shown to the users
    <title> contains title of the page which is shown in the browser tab
    <meta> contains information about the page itself i.e keywords, page description,etc

  2. Text Content Tags: '
    TAGS USES
    <h1>-<h6> Define headings, <h1> being the largest and <h6> the smallest.
    <p> Defines a paragraph.
    <br> Inserts a line break.
    <hr> inseart a line which is visible.
    <blockquote> Indicates a long quotation.
    <pre> Displays preformatted text (preserves spacing).
    <b> makes a text bold.
    <strong> same as <b> but its semantic.
    <i> makes a text italics.
    <em> same as <i> but its semantic.
    <mark> it marks a text.
    <small> it makes a text small.
    <sub> it helps in creating subscript.
    <ins> Indicates inserted text underline.(it is semantic).
    <sup> it creates superscript.
    <u> it is used to underline the text.
    <del>is is used to cross an text.

  3. List Tags:
    TAGS USES
    <ul> unordered list
    <ol> ordered list
    <li> list item
    <dl> description list
    <dt> description term
    <dd> description defination

  4. Media Tags:
    TAGS USES
    <img> helps to put image page
    <audio> helps to put audio on page
    <video> helps to put video on page
    <source> helps to put find source for <video> and <audio>
    <track> Specifies text tracks for <video> and <audio> (e.g., subtitles).
    <embed> Embeds external content like plugins.
    <iframe> Embeds another HTML document within the current document.

  5. Table Tags:
    TAGS USES
    <table> Creates a table.
    <thead> cointainer for table heading
    <tbody> cointainer for table data
    <tr> table row
    <th> table heading
    <td> table data
    <caption> table caption eg:look at the heading on tables of this page
    <tfoot> Groups the footer content in a table.
    <col> to put multiple column in a single row
    <colgroup> Groups columns for styling.

  6. Form Tags
    TAGS USES
    <form> Creates a form for user input.
    <input> Defines an input field.
    <textarea> Defines a multi-line text input.
    <button> Defines a clickable button.
    <select> Creates a dropdown list.
    <option> Defines an option in a dropdown list.
    <lable> Labels an input element.
    <fieldset> Groups related elements in a form.
    <legend> Defines a title for a <fieldset>.
    <datalist> Provides autocomplete options for an <input>.
    <output> Displays the result of a calculation.

  7. Semantic and Sectioning Tags
    TAGS USES
    <header> Defines the header section of a document or section.
    <footer> Defines the footer section of a document or section.
    <section> Defines a thematic grouping of content.
    <article> Defines independent content (e.g., blog post).
    <aside> Defines content aside from the main content (e.g., sidebar).
    <nav> Defines navigation links.
    <main> Represents the main content of a document.

  8. Scripting and Linking Tags
    TAGS USES
    <script> Embeds or references JavaScript code.
    <noscript> Defines content displayed when JavaScript is disabled.
    <link> Links external resources like stylesheets.
    <style> Embeds CSS styles in the document.

  9. Interactive Tags
    TAGS USES
    <details> Creates a collapsible section.
    <summary> Defines a summary for the <details> element.
    <dialog> Defines a dialog box or popup.
    <menu> Represents a list of commands.

-there are many more tags but these are some important and frequently used one.

HTML Attributes

Attributes are used with tags they increases fuctionality of the tags and and also decides their behaviour.Attributes in HTML provide additional information about elements, defining their behavior, appearance, or functionality. They are written within the opening tag of an element as name-value pairs (e.g., name="value"). Common attributes include id (unique identifier), class (CSS styling or JavaScript), and style (inline CSS). Some attributes are specific to certain elements, such as src for images and href for links. Global attributes like title and lang can be applied to any element. Attributes enhance interactivity, accessibility, and usability, allowing developers to customize elements and create dynamic, responsive web pages tailored to user needs.

HTML Attributes and their uses

  1. Global Attributes
    • can be used with most tags
    ATTRIBUTES USES
    id Provides a unique identifier for an element, often used for styling or scripting.
    class Provides a unique identifier for an element, often used for styling or scripting.
    style Inline CSS styling for an element.
    title Provides additional information about an element, displayed as a tooltip.
    lang Specifies the language of the element's content (e.g., lang="en" for English).
    dir Defines text direction (ltr, rtl, or auto).
    hidden Hides the element from view, but it remains in the DOM.
    data-* Custom data attributes for storing extra data for JavaScript.
    tabindex Specifies the tab order of an element.
    contenteditable Makes the element editable by the user.
    draggable Indicates whether the element can be dragged.

  2. Attributes for Links (<a> Tag)
    ATTRIBUTES USES
    href Specifies the URL of the link.
    target Specifies where to open the linked document (_self, _blank, _parent, _top).
    rel Defines the relationship between the current document and the linked document (e.g., nofollow, noopener).
    download Prompts the user to download the linked file instead of navigating to it.

  3. Attributes for Images (<img> Tag)
    ATTRIBUTES USES
    src Specifies the path to the image file.
    alt Provides alternative text for the image if it cannot be displayed.
    width Sets the width of the image (in pixels or percentage).
    height Sets the height of the image (in pixels or percentage).
    loading Specifies lazy loading of the image (lazy, eager).

  4. Attributes for Forms
    ATTRIBUTES USES
    action Specifies the URL to send the form data to.
    method Defines the HTTP method to use (GET or POST).
    enctype Specifies how form data should be encoded (application/x-www-form-urlencoded, multipart/form-data, etc.).
    autocomplete Enables or disables autocomplete for form fields (on or off).
    novalidate Disables form validation.

  5. Attributes for Inputs (<input> Tag)
    ATTRIBUTES USES
    type Specifies the type of input (text, password, email, checkbox, etc.).
    name Defines the name of the input (used in form submission).
    value Specifies the default value of the input.
    placeholder Provides a hint or placeholder text inside the input.
    required Marks the input as mandatory.
    readonly Makes the input non-editable but still submit its value.
    disabled Disables the input (grayed out and non-interactive).
    maxlength Sets the maximum number of characters allowed.
    min/max Sets the minimum or maximum value for numeric inputs.
    pattern Specifies a regex pattern for input validation.
    step Specifies the increment for numeric inputs.

  6. Attributes for Tables
    ATTRIBUTES USES
    colspan Specifies the number of columns a cell should span.
    rowspan Specifies the number of rows a cell should span.
    headers Associates a cell with header cells for accessibility.

  7. Media Attributes
    ATTRIBUTES USES
    controls Displays media controls (e.g., play, pause).
    autoplay Automatically starts playing the media.
    loop Makes the media loop continuously.
    muted Starts the media with the sound muted.
    preload Specifies how the browser should load the media (none, metadata, auto).

  8. Scripting Attributes
    ATTRIBUTES USES
    src Specifies the source file for a script.
    defer Defers execution of the script until after the document has been parsed.
    async Allows the script to run asynchronously.
    type Specifies the type of script (e.g., text/javascript).

  9. ARIA (Accessibility) Attributes
    ATTRIBUTES USES
    aria-lable Provides a label for an element for screen readers.
    aria-hidden Hides the element from assistive technologies.
    role Defines the role of an element (e.g., button, alert).

-there are many more attributes but these are some important and frequently used one.

SOME OTHER STUFF

There are some important terms we need to keep in mind while working with HTML like:

TAGS
There are many types of tags and each of them perform some specific function aside from perfoming some functions they also act as container for content such as text,images,videos,etc so when we use CSS we can call a specific cointainer and style them as we want this adds a lot of versality to the language and provide developer with a lot of room for creativity CSS is an amazing language which can change a boring looking HTML page to a cool website

ELEMENTS
<tag>content</tag> this is called an element in HTML

BLOCK ELEMENT
A block element in HTML is an element that takes up the full width of its parent container by default, starting on a new line and pushing the following content to the next line. Block elements are typically used to structure the layout of a web page and define sections of content.

Characteristics of Block Elements
  1. Starts on a New Line: Each block element begins on a new line, separating itself from adjacent elements.
  2. Takes Full Width: By default, it spans the entire width of its container, regardless of the content inside.
  3. Can Contain Other Elements: Block elements can contain both inline and other block elements.

Some examples
  • <div>Generic container for content.
  • <p>Paragraph of text.
  • <h1>-<h6>Headings of different levels.
  • <section>Defines a thematic grouping of content.
  • <article>Represents an independent piece of content.
  • <header>Defines a header section.
  • <fotter>Defines a footer section.
  • <nav>Represents navigation links.
  • <ul><ol> Lists.
  • <table>Defines a table.

INLINE ELEMENT
An inline element in HTML is an element that does not start on a new line and only takes up as much width as necessary for its content. Inline elements are typically used to style or format a part of the text or content within a block element.

Characteristics of Inline Elements
  1. Does Not Start on a New Line: Inline elements appear within the flow of text or content without breaking it.
  2. Takes Only Necessary Width: The width is determined by the content inside the element, not the full width of the container.
  3. Cannot Contain Block Elements: Inline elements can only contain other inline elements or text.

Some examples
  • <span>A generic container for styling or scripting.
  • <b>Makes text bold (non-semantic).
  • <stong>Adds strong emphasis (semantic, typically bold).
  • <i>Italicizes text (non-semantic).
  • <em>Adds emphasis (semantic, typically italic)
  • <u> underlines the text
  • <a>Creates hyperlinks.
  • <img>Embeds images.
  • <br>Inserts a line break.
  • <input>Defines input fields.
  • <lable>Labels form elements.