Programming

What is HTML?

At its core, HTML is the language of the web. It's not a programming language in the sense that it doesn't have complex logic or algorithms. Instead, it's a markup language. Think of it as a way to structure and label the content you see on a website. It's the foundation upon which websites are built. Imagine building a house. HTML is like the framework – the walls, the floors, and the roof. It provides the basic structure, but doesn't add the color, the style, or the interactivity. For that, you need other technologies like CSS (for styling) and JavaScript (for interactivity). Key Concepts Elements: HTML is made up of elements. An element is a component of a webpage, such as a paragraph, a heading, an image, a link, or a button. Each element has a specific purpose and structure. Tags: Elements are defined using tags. Tags are keywords enclosed in angle brackets (). Most elements have an opening tag (e.g., ) and a closing tag (e.g., ). Content: The content of an element goes between its opening and closing tags. For example, in the tag My Heading, the content is "My Heading." Empty Elements: Some elements are empty elements. They don't have content and therefore don't have closing tags. A good example of this is the tag, used for images. Structure of an HTML Document: Every HTML document follows a basic structure: : This declaration tells the browser that the document is an HTML5 document. It should always be the very first line in your HTML file. : This is the root element, encapsulating the entire HTML document. Everything else goes inside this element. : This section contains metadata about the HTML document. Metadata is information about the data, rather than the content itself. This can include the document's title, links to stylesheets, and other information that's not visible on the webpage. : Sets the title that appears in the browser tab or window title bar. : This section contains the actual content that will be displayed on the webpage. This includes everything from text and images to forms and tables. A Basic HTML Document Example My First HTML Page Welcome to My Website This is a paragraph of text. Here you will learn all about HTML. Visit Example Website Explanation of Elements Used: : As explained before, this is the document declaration. : The root element, with the attribute lang="en" indicating the language of the document is English. : The section for metadata. : Specifies the character encoding for the document. UTF-8 is a common and widely supported character encoding. : This is important for responsive web design; it tells the browser how to control the page's dimensions and scaling on different devices. My First HTML Page: The title that will appear in the browser tab. : The main content of the webpage. Welcome to My Website: A level 1 heading (the most important heading). HTML offers different heading levels: to . This is a paragraph of text. Here you will learn all about HTML.: A paragraph of text. : An image element. src is an attribute specifying the path to the image file. alt is an important attribute providing alternative text for accessibility; it is displayed if the image cannot be loaded. Visit Example Website: A hyperlink element. href is the attribute specifying the URL to link to. The content within the tag is the clickable text for the link. Common HTML Elements Here's a look at some other important HTML elements: Headings: to (as we saw earlier) are used to define different heading levels. is typically used for the most important heading on the page. Paragraphs: defines a paragraph of text. Line Breaks: inserts a single line break. (It's an empty element). Horizontal Rules: creates a horizontal line. (It's an empty element). Links: (anchor tags) are used to create hyperlinks to other pages or other resources. The href attribute determines the link destination. Images: embeds images. The src attribute specifies the path to the image file, and the alt attribute provides alternative text for accessibility. Lists: Unordered Lists: creates an unordered list (typically with bullet points). Each list item is defined using . Ordered Lists: creates an ordered list (typically numbered). Each list item is defined using . Divisions and Spans: : A block-level container that's used to group content and is often used for creating layouts or sections. : An inline container used to group inline content, typically for styling purposes. Forms: : Creates a form for collecting user input. : Creates form input fields (e.g., text fields, checkboxes, radio buttons). : Creates a multi-line text input area. : Creates a button (e.g., submit, reset). Tables: : Creates a table. : Defines a table row. : Defines a table header cell. : Defines a table data cell. Attributes You've se

Jan 14, 2025 - 21:35
What is HTML?

At its core, HTML is the language of the web. It's not a programming language in the sense that it doesn't have complex logic or algorithms. Instead, it's a markup language. Think of it as a way to structure and label the content you see on a website. It's the foundation upon which websites are built.

Imagine building a house. HTML is like the framework – the walls, the floors, and the roof. It provides the basic structure, but doesn't add the color, the style, or the interactivity. For that, you need other technologies like CSS (for styling) and JavaScript (for interactivity).

Key Concepts

  1. Elements: HTML is made up of elements. An element is a component of a webpage, such as a paragraph, a heading, an image, a link, or a button. Each element has a specific purpose and structure.
  • Tags: Elements are defined using tags. Tags are keywords enclosed in angle brackets (< and >). Most elements have an opening tag (e.g.,

    ) and a closing tag (e.g.,

    ).
  • Content: The content of an element goes between its opening and closing tags. For example, in the tag

    My Heading

    , the content is "My Heading."
  • Empty Elements: Some elements are empty elements. They don't have content and therefore don't have closing tags. A good example of this is the tag, used for images.
  1. Structure of an HTML Document: Every HTML document follows a basic structure:
  • : This declaration tells the browser that the document is an HTML5 document. It should always be the very first line in your HTML file.
  • : This is the root element, encapsulating the entire HTML document. Everything else goes inside this element.
  • : This section contains metadata about the HTML document. Metadata is information about the data, rather than the content itself. This can include the document's title, links to stylesheets, and other information that's not visible on the webpage.
    • </code>: Sets the title that appears in the browser tab or window title bar.</li> </ul> </li> <li> <code><body></code>: This section contains the actual content that will be displayed on the webpage. This includes everything from text and images to forms and tables.</li> </ul> <h2> A Basic HTML Document Example </h2> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="cp"><!DOCTYPE html></span> <span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">></span> <span class="nt"><head></span> <span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span><span class="nt">></span> <span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1.0"</span><span class="nt">></span> <span class="nt"><title></span>My First HTML Page<span class="nt">

      Welcome to My Website

      This is a paragraph of text. Here you will learn all about HTML. src="my_image.jpg" alt="A description of my image"> href="https://www.example.com">Visit Example Website

Explanation of Elements Used:

  • : As explained before, this is the document declaration.
  • : The root element, with the attribute lang="en" indicating the language of the document is English.
  • : The section for metadata.
    • : Specifies the character encoding for the document. UTF-8 is a common and widely supported character encoding.
    • : This is important for responsive web design; it tells the browser how to control the page's dimensions and scaling on different devices.
    • My First HTML Page: The title that will appear in the browser tab.
  • : The main content of the webpage.

    • Welcome to My Website

      : A level 1 heading (the most important heading). HTML offers different heading levels:

      to
      .

    • This is a paragraph of text. Here you will learn all about HTML.: A paragraph of text.

    • A description of my image: An image element. src is an attribute specifying the path to the image file. alt is an important attribute providing alternative text for accessibility; it is displayed if the image cannot be loaded.
    • Visit Example Website: A hyperlink element. href is the attribute specifying the URL to link to. The content within the tag is the clickable text for the link.

Common HTML Elements

Here's a look at some other important HTML elements: