DEV Community

Arun
Arun

Posted on

BASICS OF HTML CSS JAVASCRIPT

#html #css #javascript

**1. What is HTML?

Definition: HTML (HyperText Markup Language) is the standard language used to structure content on the web.

Purpose: It defines the skeleton of a webpage (headings, paragraphs, images, links, forms, etc.).

Nature: It is a markup language, not a programming language.

  1. Tag vs Element

Tag: The keyword enclosed in angle brackets (< >) like

,

, .

Element: The complete structure, including the start tag, content, and end tag. Example:

Hello

.

Difference: A tag is just the marker, but an element is the full unit (tag + content).

  1. Framework vs Library

Library: A collection of reusable functions you can call when needed (e.g., jQuery, Lodash).

Framework: Provides a structured environment where it often calls your code (e.g., React, Angular).

Key Difference: With a library, you control the flow. With a framework, it controls the flow (Inversion of Control).

  1. What is CSS?

Definition: CSS (Cascading Style Sheets) styles the HTML content.

Purpose: It controls design, layout, and appearance (colors, fonts, spacing, animations).

Nature: It separates structure (HTML) from presentation (CSS).

  1. What is JavaScript (JS)?

Definition: JS is a programming language that makes web pages interactive and dynamic.

Purpose: It enables things like form validation, sliders, dropdowns, and real-time updates.

Nature: Runs in the browser (client-side), but can also run on servers (e.g., Node.js).

  1. What is a List?

A list in HTML is used to group related items together in a structured way.

Lists help in organizing content (like menus, steps, or collections).

HTML supports different types of lists depending on the need.

  1. Types of list

Types of Lists

A. Ordered List (

    )

    Items are displayed in a specific order (numbers, roman numerals, letters).

    Each item is wrapped in

  1. (list item).

    Example: Steps in a recipe or procedure.

    1. Wake up
    2. Brush teeth
    3. Have breakfast

    Output (Ordered List)

    1. Wake up

    2. Brush teeth

    3. Have breakfast

    B. Unordered List (

      )

      Items are shown with bullets (●), no specific order.

      Used for lists where order doesn’t matter (like features or grocery items).

      Example: Shopping list.

      • Apples
      • Milk
      • Bread

      Output (Unordered List)

      • Apples

      • Milk

      • Bread

      C. Definition List (

      )

      Used for terms and definitions.

      = definition term,
      = definition description.

      Example: Glossary or FAQs.

      HTML
      HyperText Markup Language
      CSS
      Cascading Style Sheets

      Output (Definition List)

      HTML
        HyperText Markup Language

      CSS
        Cascading Style Sheets
      Working

      ✓✓dt> (definition term) appears in bold by default.

      ✓✓

      (definition description) appears indented under it.

      8.What is Header, Footer, and Section?

      *Header ()

      ✓✓Represents the top part of a webpage or a section.

      ✓✓Usually contains logo, title, navigation menu.

      ✓✓Appears once at the top or at the start of sections.

      *Footer ()

      ✓✓Represents the bottom part of a webpage or section.

      ✓✓Usually contains copyright, contact info, social links.

      ✓✓Appears once at the bottom.

      *Section ()

      ✓✓Represents a thematic block of content in a webpage.

      ✓✓Can contain headings, paragraphs, images, or articles.

      ✓✓Helps in dividing the page into meaningful parts.

      Simple program using header, footer and section

      <!DOCTYPE html>



      Simple Page


      My Website


      Home | About | Contact

      About Me


      I am learning HTML basics.

      © 2025 My Website. All Rights Reserved.

      1. Why use ?

      ✓✓Semantic meaning: Clearly says “this is the top part of the page/section” (logo, navigation, title).

      ✓✓SEO benefit: Search engines understand the importance of header content (like navigation, site name).

      ✓✓Accessibility: Screen readers can identify it as a header, improving usability for visually impaired users.

      1. Why use ?

      ✓✓Semantic meaning: Identifies the closing area (contact info, copyright, links).

      ✓✓Consistency: A clear place for extra information at the bottom of each page or section.

      ✓✓Accessibility & SEO: Helps tools and crawlers know “this is the ending part of the page.”

      1. Why use ?

      ✓✓Organized content: Groups related content into meaningful blocks (like “About Us”, “Services”).

      ✓✓Semantic structure: Instead of just

      , tells the browser this part is a standalone topic.

      ✓✓Improved readability: Both for developers and for search engines (helps with SEO).

      **




Top comments (0)