First basic of HTML

If you are writing HTML, first open and close the HTML tag like <html></html>.
If you open any tag, remember to close it before starting another.

Next: Head Tag

After the HTML tag, we use the <head></head> tag.

Inside the Head

In the head, we use the <title></title>, <meta>, and favicon link tag.

The <title> tag sets your project name.

Meta types:

  1. viewport - used for responsive screen view
  2. keywords - used for search engines
  3. charset="UTF-8" - for character encoding
  4. description - describes the web page

Favicon

Favicon is added using the <link> tag. Use rel for icon, type for image type, and href to add the image path.

Next: Body Tag

In the body, we write all the visible content. Some important tags:
Heading tags <h1> to <h6>, paragraph <p>, div <div>, anchor <a>,
image <img>, video <video>, table <table>, form <form>, comment <!-- -->,
list tags <ol> and <ul>, iframe <iframe>.
For more tags, refer to W3Schools.

Heading Tag

Heading has 6 levels: h1, h2, h3, h4, h5, h6.

Paragraph Tag

Use <p> tag for writing paragraphs.

Div Tag

Div is used as a container on the same page.

container image

In the div, we use attributes: class and id.

  1. Use class when you want to apply the same style to multiple elements.
  2. Use id for a unique identifier - cannot reuse the same id on another element.

Anchor Tag

We use the anchor <a> tag to add links using the href attribute.

Image Tag

Use the <img> tag to add images. Use src for the path and alt for alternate text.

Video Tag

Use the <video> or <iframe> tag to add videos.

Use src and type inside the video tag.

Use iframe for embedding YouTube videos.

Table Tag

In a <table>, use:

  1. tr - table row
  2. th - table heading
  3. td - table data/cell
  4. colspan - merge columns
  5. rowspan - merge rows
  6. padding - space inside cell
  7. spacing - space between cells
  8. border - draw border around table

Form Tag

Form tags: input, label, select, textarea, fieldset, legend, datalist, option

Input types: button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week

Form attributes: size, value, readonly, disabled, maxlength, min, max, multiple, pattern, placeholder, required, step, autofocus, height, width, list, autocomplete

Form Tag Explanation

  1. input - for all input types
  2. label - for naming inputs
  3. select - or dropdown lists
  4. textarea - for multiline text (like address)
  5. fieldset - to group related form elements
  6. legend - caption for fieldset
  7. datalist - for dropdown with suggestions
  8. option - used inside select or datalist

Form Input Types

  1. button - click button
  2. checkbox - tick options
  3. color - choose color
  4. date - select date
  5. datetime-local - date with time
  6. email - enter email
  7. file - upload file
  8. hidden - hide value
  9. image - image input
  10. month - choose month
  11. number - number input
  12. password - hidden text
  13. radio - select one from options
  14. range - choose range like 1 to 10
  15. reset - reset form
  16. search - search field
  17. submit - send form
  18. tel - telephone number
  19. text - plain text input
  20. time - select time
  21. url - add link
  22. week - select week

Form Attributes

  1. size - size of input box
  2. value - default value of field
  3. readonly - non-editable input
  4. disabled - disabled field
  5. maxlength - limit character length
  6. min / max - set limits (like age, date)
  7. multiple - select more than one
  8. pattern - regex pattern for validation
  9. placeholder - hint inside field
  10. required - must be filled
  11. step - step increment (e.g., 2, 4, 6)
  12. autofocus - auto focus on field
  13. height / width - element sizing
  14. list - used with datalist
  15. autocomplete - auto fill with previous value

Comment Tag

Comment tag is used to hide and add notes for developers. Syntax: <!-- comment -->

List Tags

Two types: ordered list <ol> and unordered list <ul>.

Use <li> for list items.

Ordered lists use numbers; unordered lists use dots or symbols.

Iframe Tag

Iframe is used for embedding Google Maps or YouTube videos.