HTML5 + Bootstrap

by 
<!DOCTYPE html>

The first line of any HTML 5 document. The <!DOCTYPE html> declaration is an instruction to the web browser about what version of HTML the page is written in. While it looks like an HTML tag, it is technically a document type declaration (DTD).

In modern web development, it is the very first thing that should appear at the top of every HTML document.

Its primary job is to prevent the browser from switching into “Quirks Mode.”

In the old days of the web, pages were typically written in two versions: One for Netscape Navigator, and one for Microsoft Internet Explorer. When the web standards were made at W3C, browsers could not just start using them, as doing so would break most existing sites on the web. Browsers therefore introduced two modes to treat new standards compliant sites differently from old legacy sites.

There are now three modes used by the layout engines in web browsers: quirks mode, limited-quirks mode, and no-quirks mode. In quirks mode, layout emulates behavior in Navigator 4 and Internet Explorer 5. This is essential in order to support websites that were built before the widespread adoption of web standards. In no-quirks mode, the behavior is (hopefully) the desired behavior described by the modern HTML and CSS specifications. In limited-quirks mode, there are only a very small number of quirks implemented. (See more at the MDN site)

The limited-quirks and no-quirks modes used to be called “almost-standards” mode and “full standards” mode, respectively. These names have been changed as the behavior is now standardized.

Secondly, it identifies HTML5 – This specific, short version—<!DOCTYPE html>—is the standard for HTML5. In older versions of HTML (like HTML 4.01), the declaration was much longer and more complex, looking like this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Case Insensitive: You can write it as <!doctype html>, <!DOCTYPE HTML>, or even <!dOcTyPe hTmL>, and it will work exactly the same. However, uppercase DOCTYPE is the common convention.

No Closing Tag: It is a “void” element; it does not need a </DOCTYPE> at the end.

Not a Tag: It doesn’t represent content. It is simply a “preamble” that sets the rules for everything that follows.

PHP logic only files

Yes, many PHP files start directly with the <?php opening tag. This is actually standard practice for files that contain logic, configuration, or classes, rather than HTML layout.

Where the tag is placed—and what comes before it—completely changes how the server and browser handle the file.

1. Logic-Only Files (No HTML)

If your PHP file is strictly for backend logic (like a database connection script, a functions file, or an API endpoint), it must start with <?php on the very first line.

In these files, it is also a best practice to omit the closing ?> tag at the end of the file. This prevents accidental whitespace or new lines from being sent to the browser, which can cause “headers already sent” errors.

PHP

<?php
// db_connect.php
$servername = "localhost";
$username = "root";
$password = "";

$conn = new mysqli($servername, $username, $password);
// Note: No closing tag here

2. Template Files (HTML + PHP)

When you are building a page that the user actually sees, the PHP tag usually appears inside the HTML or immediately after the <!DOCTYPE html> declaration.

However, if you need to check if a user is logged in or start a session, that PHP code must come before the <!DOCTYPE html> tag.

The “Header” Rule

This is the most common reason you see PHP tags at the very top of a page. Certain functions must be called before any HTML, spaces, or text are sent to the browser:

  • session_start(): To track user data across pages.
  • header(): For redirecting users (e.g., header("Location: login.php");).
  • setcookie(): To save cookies.

If there is even a single blank line or the <!DOCTYPE html> declaration before these functions, PHP will throw a warning.

The second line

<html lang="en">

Indicates language – Tells the browser this is an HTML5 page.

The line <html lang="en"> is the root element of your document, and it tells the browser and search engines that the primary language of the webpage is English.

Should it be the second line by default?

Yes. In a standard, modern HTML5 document, it almost always appears as the second line, immediately following the <!DOCTYPE html> declaration.

The standard “starting block” for any Bootstrap or HTML project looks like this:

  1. <!DOCTYPE html> (Tells the browser this is an HTML5 page)
  2. <html lang="en"> (The container for the entire page and its language)
  3. <head> (The container for metadata, title, and Bootstrap links)

Why is this line important?

  • Accessibility (Screen Readers): This is the most critical reason. If a person with visual impairment uses a screen reader, the software reads this attribute to know which accent and pronunciation to use. If you set it to en but write in Marathi, the screen reader will try to read Marathi words with an English accent, making it unintelligible.
  • Search Engines (SEO): Google uses this to help decide which users should see your site. If someone in India searches for a topic in English, Google uses this tag to confirm your content matches their language preference.
  • Browser Translation: Have you ever visited a site and Chrome asked, “Would you like to translate this page?” The browser makes that decision based on the lang attribute.

Can you change it?

Since you are based in India, you might build a site in another language. You would simply change the code:

  • Hindi: <html lang="hi">
  • Marathi: <html lang="mr">
  • German: <html lang="de"> (Useful if you are practicing your German language skills!)

Multilingual pages

How to use the language tag if it is a multilingual file? For e.g. I want to provide the syllabus in English and then provide its translation or I want to prepare a question paper in English and Marathi.

When you are creating a multilingual document, the way you use the lang attribute changes from a “page-wide” setting to a “section-specific” setting. This is crucial for screen readers (so they use the correct accent/pronunciation) and for search engines to understand which part of the content is in which language.

1. The Global Language Tag

You should still start your document by declaring the primary language of the page (usually the language of the navigation, headers, and instructions) in the <html> tag.

HTML

<!DOCTYPE html>
<html lang="en"> ```

## 2. Using the `lang` Attribute on Elements
For specific sections, like a Marathi translation of a syllabus or a bilingual question paper, you apply the `lang` attribute directly to the container tag (like a `<div>`, `<p>`, or `<span>`).



### Example: Bilingual Question Paper
In this setup, the browser and assistive technologies will treat each block according to its specific language code (`en` for English, `mr` for Marathi).

```html
<div class="question-block">
    <p lang="en">1. What is the capital of Maharashtra?</p>
    
    <p lang="mr">१. महाराष्ट्राची राजधानी कोणती आहे?</p>
</div>

3. Best Practices for Bilingual Layouts

Use Containers for Style

Since you are often working with different scripts (like Devanagari for Marathi), you might want to use different fonts or line heights for each language. You can target these in your CSS:

CSS

/* Apply a specific font for Marathi text only */
[lang="mr"] {
    font-family: 'Gautami', 'Arial', sans-serif;
    line-height: 1.6;
    color: #2c3e50;
}

The <span> tag for Inline Changes

If you are writing a sentence in English but need to include a Marathi word in the middle, use a <span>:

HTML

<p lang="en">The Marathi word for 'Hello' is <span lang="mr">नमस्कार</span>.</p>

4. Why this matters for your projects

Since you have an interest in Indian administration and have worked on a quiz application, using proper lang tags is particularly important if you ever expand that quiz app to support regional languages.

  • Database Tip: If you’re storing these questions in your MySQL database, ensure your tables are set to utf8mb4_unicode_ci collation so that the Marathi characters are stored and retrieved correctly without turning into question marks.

Summary of Codes

  • English: lang="en"
  • Marathi: lang="mr"
  • Hindi: lang="hi"
  • German: lang="de" (useful for your language studies!)

Language codes

For the lang attribute in HTML, the standard is the ISO 639-1 list. These are simple two-letter codes that tell the browser and screen readers exactly what language is being used.

Where to find the official lists:

Summary of the “Top 3” Lines

Every file you create for your PHP or Bootstrap projects should start exactly like this:

HTML

<!DOCTYPE html>
<html lang="en">
<head>

 - first line - ending tag is HTML
<html lang="en"> - language
<head>
    <meta charset="UTF-8"> - character set - Unicode Transformation Format
(UTF-8 (Unicode Transformation Format - 8-bit) is the dominant character encoding for the web, representing any Unicode character (from any language, emoji, symbol) using one to four 8-bit bytes, making it space-efficient for English text (using one byte) and globally compatible for all languages (using more bytes). It's backward-compatible with ASCII, meaning plain English text is valid UTF-8, and it's the default for HTML5 and modern web servers, ensuring consistent display across different systems. )

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

The Bootstrap link

CSS
    
<link href="https://cdn.jsdelivr.net" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Javascript

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>