Why Template inheritance (@extends, @section, @yield) in Laravel? - Purpose & Use Cases

The Big Idea

What if you could change your website's header once and see it update everywhere instantly?

The Scenario

Imagine building a website where every page needs the same header, footer, and sidebar. You copy and paste the same HTML into every file. Then, you want to change the header color. You have to open every file and update it one by one.

The Problem

This manual approach is slow and risky. You might miss some files, causing inconsistent layouts. It's hard to keep the design uniform, and updating common parts becomes a frustrating chore.

The Solution

Template inheritance lets you define a base layout once, then create pages that fill in only the unique parts. Using @extends, @section, and @yield, Laravel automatically combines your layouts, so changes to the base affect all pages instantly.

Before vs After

✗ Before

<!DOCTYPE html>
<html>
<head><title>Page 1</title></head>
<body>
<header>My Site</header>
<p>Content for page 1</p>
<footer>Footer info</footer>
</body>
</html>

✓ After

@extends('base')
@section('content')
<p>Content for page 1</p>
@endsection

What It Enables

This makes building and maintaining websites faster, cleaner, and less error-prone by reusing layouts effortlessly.

Real Life Example

Think of a blog where every post shares the same header and footer. With template inheritance, you update the header once, and all posts reflect the change immediately.

Key Takeaways

Copy-pasting layouts is slow and error-prone.

Template inheritance centralizes common parts for easy updates.

@extends, @section, and @yield work together to build pages efficiently.

Practice

1. What is the main purpose of the @extends directive in Laravel Blade templates?

easy

A. To define a section of content inside a template

B. To display content from a section in the layout

C. To specify which base layout the current view should use

D. To include a partial view inside another view

Solution

1. Step 1: Understand the role of @extends

   The @extends directive tells Laravel which base layout file the current view should build upon.

2. Step 2: Differentiate from other directives

   @section defines content blocks, @yield displays them, and including partials uses @include. Only @extends sets the base layout.

3. Final Answer:

   To specify which base layout the current view should use -> Option C

4. Quick Check:

   @extends = base layout [OK]

Hint: Remember: @extends picks the base layout file [OK]

Common Mistakes:

• Confusing @extends with @section
• Thinking @extends outputs content
• Mixing @extends with @include

2. Which of the following is the correct syntax to define a content section named 'title' in a Blade template?

easy

A. @section('title') ... @endsection

B. @yield('title') ... @endyield

C. @extends('title') ... @endextends

D. @include('title') ... @endinclude

Solution

1. Step 1: Recall syntax for defining sections

   In Blade, @section('name') starts a content block, and @endsection ends it.

2. Step 2: Identify correct usage

   @yield is for displaying sections, @extends sets layout, and @include inserts partials. Only @section defines content.

3. Final Answer:

   @section('title') ... @endsection -> Option A

4. Quick Check:

   Define section = @section('name') [OK]

Hint: Use @section('name') to start content blocks [OK]

Common Mistakes:

• Using @yield to define content
• Trying to use @extends as a section
• Confusing @include with section definition

3. Given the following Blade layout file layouts/app.blade.php:

<html>
<head>
    <title>My Site - @yield('title')</title>
</head>
<body>
    @yield('content')
</body>
</html>

And a child view:

@extends('layouts.app')
@section('title', 'Home Page')
@section('content')
<h1>Welcome!</h1>
@endsection

What will be the rendered HTML output?

medium

A. Syntax error due to incorrect section usage

B.

My Site - @section('title', 'Home Page')

@section('content')
Welcome!
@endsection

C.

My Site -

D.

My Site - Home Page

Welcome!

Solution

1. Step 1: Understand @yield and @section interaction

   The layout uses @yield('title') and @yield('content') to display content from child sections.

2. Step 2: Check child view sections

   The child view defines @section('title', 'Home Page') and a content section with an <h1> tag. These replace the yields in the layout.

3. Final Answer:

   The rendered HTML includes the title 'Home Page' and the <h1>Welcome!</h1> content -> Option D

4. Quick Check:

   @yield shows @section content [OK]

Hint: Remember: @yield outputs content from matching @section [OK]

Common Mistakes:

• Expecting raw @section tags in output
• Missing that @section('title', 'text') sets inline content
• Confusing @yield with @section definition

4. Consider this Blade child view code:

@extends('layouts.master')
@section('content')
<p>Hello World</p>

What is the problem with this code?

medium

A. Missing @endsection to close the content section

B. Incorrect use of @extends directive

C. Cannot use HTML inside @section

D. Should use @yield instead of @section

Solution

1. Step 1: Check section syntax completeness

   The @section('content') directive must be closed with @endsection to mark the end of the content block.

2. Step 2: Identify missing closing directive

   The code snippet lacks @endsection, causing a syntax error or unexpected behavior.

3. Final Answer:

   Missing @endsection to close the content section -> Option A

4. Quick Check:

   Always close @section with @endsection [OK]

Hint: Always pair @section with @endsection [OK]

Common Mistakes:

• Forgetting to close @section
• Thinking @yield defines content
• Believing HTML is not allowed inside sections

5. You have a base layout with multiple @yield placeholders: title, header, and content. You want to create a child view that fills only content and uses a default title and header from the layout. How should you write the child view?

hard

A. @extends('layouts.base')
@yield('title')
@yield('header')
@section('content')
Page content here
@endsection

B. @extends('layouts.base')
@section('content')
Page content here
@endsection

C. @extends('layouts.base')
@section('title', 'Default Title')
@section('header', 'Default Header')
@section('content')
Page content here
@endsection

D. @extends('layouts.base')
@include('title')
@include('header')
@section('content')
Page content here
@endsection

Solution

1. Step 1: Understand default content in layout

   If the base layout provides default content for title and header, you don't need to override those sections in the child view.

2. Step 2: Write child view with only needed sections

   Only define the content section in the child view to fill that placeholder, leaving others to default.

3. Final Answer:

   Child view extends layout and defines only content section -> Option B

4. Quick Check:

   Define only needed sections; others use layout defaults [OK]

Hint: Only override sections you want to change in child views [OK]

Common Mistakes:

• Overriding sections unnecessarily
• Using @yield inside child views
• Trying to include sections with @include