# Html Style Guide

### Anchor

#### External links

External links must have `rel="noopener"` and `target="_blank"` attribute.

```html
// Bad 
<a href="path/to/external/file">External URL</a>

// Good 
<a href="path/to/external/file" rel="noopener" target="_blank">External URL</a>
```

#### Title attribute

Anchor must have `title` attribute.

```html
// Bad
<a href="#">Link</a>

// Good
<a href="#" title="Description of anchor">Link</a>
```

### Attribute

#### Attribute Case

Attribute must be written in lowercase.

```html
// Bad
<meta charset="UTF-8">

// Good
<meta charset="utf-8">
```

#### Attribute value

Attribute value must be wrapped in quotation marks.

```html
// Bad
<input type=text>

// Good
<input type="text">
```

#### Boolean attribute

Boolean attribute values like `checked`, disabled and `required` are redundant and must be omitted.

```html
// Bad
<input type="text" required="required">

// Good
<input type="text" required>
```

#### Equal Sign

Spaces around attribute equal signs must be avoided.

```html
// Bad
<input type = "text">

// Good
<input type="text">
```

### Work with css

**BEM**, or “Block-Element-Modifier”, is a *naming convention* for classes in HTML and CSS. It was originally developed by Yandex with large codebases and scalability in mind, and can serve as a solid set of guidelines for implementing OOCSS.

* CSS Trick's [BEM 101](https://css-tricks.com/bem-101/)
* Harry Roberts' [introduction to BEM](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)

We recommend a variant of BEM with PascalCased “blocks”, which works particularly well when combined with components (e.g. React). Underscores and dashes are still used for modifiers and children.

**Example :**

```html
<article class="ListingCard ListingCard--featured">
      <h1 class="ListingCard__title">Adorable 2BR in the sunny Mission</h1>
      <div class="ListingCard__content">
        <p>Vestibulum id ligula porta felis euismod semper.</p>
      </div>
</article>

```

### JavaScript hooks

Avoid binding to the same class in both your CSS and JavaScript. Conflating the two often leads to, at a minimum, time wasted during refactoring when a developer must cross-reference each class they are changing, and at its worst, developers being afraid to make changes for fear of breaking functionality.

We recommend creating JavaScript-specific classes to bind to, prefixed with `.js-`:

```html
<button class="btn btn-primary js-request-to-book">Request to Book</button>
```

Reference:&#x20;

* [https://github.com/airbnb/css](https://github.com/airbnb/css#properties)
* <https://html-style-guide.netlify.app/>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://madeindonesia.gitbook.io/mi-guide/style-guide/html-style-guide.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.