A functionally independent page component that can be reused. In HTML, blocks are represented by the class attribute

<!-- Correct. The `error` block is semantically meaningful -->
<div class="error"></div>
<!-- Incorrect. It describes the appearance -->
<div class="red-text"></div>

Nested Block

You can use nested block .

<!-- `header` block -->
<header class="header">
<!-- Nested `logo` block -->
<div class="logo"></div>
<!-- Nested `search-form` block -->
<form class="search-form"></form>

Here header is block , logo is block and search-form is also a block .