Basics of HTML - Limehills Technologies

HTML (HyperText Markup Language) is the standard language used to create and design webpages. It structures the content on the web and provides the basic building blocks for websites. Let’s break down the fundamentals of HTML:

1. HTML Structure

An HTML document has a basic structure made up of elements enclosed within tags. These elements dictate how content will be displayed. Here’s an example of the structure of a simple HTML document:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello!</title>
    <meta name="description" content="description"/>
    <meta name="author" content="author" />
    <meta name="keywords" content="keywords" />
    <link rel="stylesheet" href="/stylesheet.css" type="text/css" />
    <style type="text/css">.body { width: auto; }</style>
  </head>
  <body>

    <h1>Hello World</h1>

  </body>
</html>

Explanation:

<!DOCTYPE html>: Declares the document type and version of HTML. It ensures the document conforms to HTML5 standards.
<html>: The root element, enclosing all content in the document.
<head>: Contains metadata (information about the document) like the title, links to stylesheets, and scripts.
<title>: Defines the title of the page, which is displayed in the browser tab.
<body>: Contains the content visible to users (headings, paragraphs, images, etc.).

2. HTML Tags and Elements

HTML uses tags to create elements. Most tags come in pairs: an opening tag (<tag>) and a closing tag (</tag>). Some common HTML tags include:

Headings: <h1> to <h6> define headings, with <h1> being the most important. html ¨K15K ¨K16K
Paragraphs: <p> is used for text content. html ¨K17K
Links: <a> defines hyperlinks.
html <a href="https://example.com">Visit Example</a>
Images: <img> displays images. Note that it’s an empty element, meaning no closing tag.
html <img src="image.jpg" alt="Description of image">
Lists:
- Ordered List (<ol>): Numbered list.
- Unordered List (<ul>): Bullet list.
  html ¨K18K

3. Attributes

Tags often come with attributes that provide additional information about an element. Attributes are placed inside the opening tag, and common ones include:

href for links:
html <a href="https://example.com">Link</a>
src for images:
html <img src="image.jpg" alt="A description of the image">
id and class for CSS styling and JavaScript interaction:
html ¨K20K ¨K21K

4. Nesting Elements

HTML elements can be nested within one another. For example, you can have a link inside a paragraph:

<p>Visit the <a href="https://example.com">Example</a> website.</p>

5. Comments

You can add comments to your HTML code, which will not be displayed on the webpage but are useful for organizing your code:

<!-- This is a comment -->

6. Doctype and Versions

HTML5 is the current version, which simplifies older versions (like HTML 4) and introduces new features like <video>, <audio>, and semantic elements (e.g., <article>, <section>).

7. Semantic HTML

Semantic HTML refers to using HTML elements according to their meaning. Instead of using a <div> for everything, elements like <header>, <footer>, <nav>, and <article> make your code more understandable and accessible.

For example:

<header>
  <h1>Website Title</h1>
</header>
<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
</nav>
<article>
  <h2>Article Title</h2>
  <p>Content of the article...</p>
</article>
<footer>
  <p>&copy; 2024 My Website</p>
</footer>

8. Void Elements

Some elements don’t require a closing tag (also called “self-closing” or “void” elements), such as:

<img> for images
<br> for line breaks
<hr> for horizontal rules

Conclusion

HTML is a markup language that defines the structure and layout of a webpage. While basic HTML focuses on the fundamental tags and document structure, modern development includes CSS for styling and JavaScript for interactivity, working together to create rich web experiences.
Use this online coding tool for free.