KandZ – Tuts

We like to help…!

2. HTML Document Structure 💻 HowTo

2. Document Structure

How to Add a DOCTYPE Declaration

  1. Place <!DOCTYPE html> as the very first line of your HTML document
  2. This declaration must come before any other code
  3. It tells the browser to use HTML5 standards for rendering
  4. It should be written in uppercase or lowercase – both work

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Page</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

How to Set the HTML Language Attribute

  1. Add the lang attribute to your <html> element
  2. Use language codes like “en” for English, “es” for Spanish, etc.
  3. This helps with accessibility and SEO

Example:

<html lang="en">

How to Create a Proper HTML Document Structure

  1. Start with <!DOCTYPE html>
  2. Add <html> element with language attribute
  3. Include <head> section with metadata
  4. Add <body> section with visible content

Complete Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Web Page</title>
</head>
<body>
    <h1>Welcome to my website</h1>
    <p>This is a paragraph.</p>
</body>
</html>

How to Add Character Encoding in Head Section

  1. Include <meta charset="UTF-8"> within the <head> section
  2. Place it early in the head section
  3. This ensures proper display of special characters

Example:

<head>
    <meta charset="UTF-8">
    <title>My Page</title>
</head>

How to Set the Page Title

  1. Add <title> element within the <head> section
  2. The text inside will appear in browser tab
  3. Keep titles descriptive and concise

Example:

<title>My Web Page</title>

How to Add Viewport Meta Tag for Responsive Design

  1. Include <meta name="viewport" content="width=device-width, initial-scale=1.0"> in <head>
  2. This makes your page responsive on mobile devices
  3. It controls the page’s dimensions and scaling

Example:

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

How to Add a Description Meta Tag

  1. Use <meta name="description" content="Your description here"> in head section
  2. Write a brief summary of your page content
  3. Helps with SEO and search engine results

Example:

<meta name="description" content="This is a sample webpage about HTML">

How to Link External CSS Files

  1. Use <link rel="stylesheet" href="styles.css"> in head section
  2. Place the link element within <head> tags
  3. Make sure the file path is correct

Example:

<head>
    <link rel="stylesheet" href="styles.css">
</head>

How to Add External JavaScript Files

  1. Use <script src="script.js"></script> in head or body section
  2. Place it before closing </body> tag for better performance
  3. Can also be placed in head section

Example:

<head>
    <script src="script.js" defer></script>
</head>

How to Add a Favicon

  1. Use <link rel="icon" href="favicon.ico" type="image/x-icon"> in head section
  2. Place the favicon file in your project directory
  3. This displays an icon in browser tabs

Example:

<head>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

How to Add Keywords Meta Tag

  1. Use <meta name="keywords" content="HTML, web development, tutorial"> in head section
  2. Include relevant keywords for SEO purposes
  3. Separate keywords with commas

Example:

<meta name="keywords" content="HTML, web development, tutorial">

How to Add Author Meta Tag

  1. Use <meta name="author" content="John Doe"> in head section
  2. Specify the author’s name or company
  3. Helps identify content creators

Example:

<meta name="author" content="John Doe">

How to Add Visible Content to Body Section

  1. Place all visible elements within <body> tags
  2. Include headings, paragraphs, images, links, etc.
  3. This is where users will see the actual page content

Example:

<body>
    <h1>Main Heading</h1>
    <p>This is visible content.</p>
    <img src="image.jpg" alt="Sample image">
</body>

How to Add Images with Alt Text

  1. Use <img src="image.jpg" alt="Description of image"> in body section
  2. Always include descriptive alt text for accessibility
  3. Helps screen readers and SEO

Example:

<img src="image.jpg" alt="A beautiful sunset over the ocean">

How to Create Hyperlinks

  1. Use <a href="url">Link Text</a> in body section
  2. The href attribute specifies where the link goes
  3. The text between tags is what users click on

Example:

<a href="page.html">Visit another page</a>

How to Add Multiple Meta Tags

  1. Include multiple <meta> elements in head section
  2. Each with different name and content attributes
  3. Combine character encoding, viewport, description, keywords, etc.

Example:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Page description">
    <meta name="keywords" content="HTML, CSS, JavaScript">
</head>

How to Create a Complete Head Section

  1. Include character encoding meta tag
  2. Add viewport meta tag for responsive design
  3. Set the page title
  4. Add other meta tags (description, keywords, author)
  5. Link external resources (CSS, favicon)

Complete Example:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="This is a sample webpage">
    <meta name="keywords" content="HTML, web development">
    <meta name="author" content="Author Name">
    <title>My Web Page</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="favicon.ico">
</head>

Leave a Reply