diff --git a/README.md b/README.md
index dd45d1a..92c4126 100644
--- a/README.md
+++ b/README.md
@@ -15,4 +15,24 @@ COMPILE_LANG=zh NODE_ENV=production yarn build
 
 Run `yarn build i18n:extract`, and languages defined in `config.langsKeyToGenerate` in gulpfile.js will be updated to `./i18n/` . This operation will not discard the old translations.
 
-After translated strings in the i18n folder, run `yarn build` with environment variable `COMPILE_LANG` will generate the compiled HTML in `./dist/` .
\ No newline at end of file
+After translated strings in the i18n folder, run `yarn build` with environment variable `COMPILE_LANG` will generate the compiled HTML in `./dist/` .
+
+## How to use i18n-id
+
+```html
+<div i18n-id="id1">content</div>
+```
+
+Adding the `i18n-id` attribute for a tag can control whether the tag will be rendered given compile-time option `COMPILE_ID`, e.g. the following command would render the tag whereas when `COMPILE_ID=id2` the tag would not be included.
+
+```
+COMPILE_ID=id1 yarn build
+```
+
+Note that when `COMPILE_ID=''` or when this option is not provided, all id are assumed and all contents are rendered.
+
+```html
+<div i18n-id="id1" i18n-if="zh">content</div>
+```
+
+Another advanced usage example. When `COMPILE_ID=id1` and `COMPILE_LANG=zh` the tag would be shown.
diff --git a/gulpfile.js b/gulpfile.js
index 713d40b..ffd1ca0 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -2,6 +2,7 @@ const config = {
 	langs: ['zh', 'en'],
 	langsKeyToGenerate: ['zh'],
 	compileLang: process.env.COMPILE_LANG || 'zh',
+	compileId: process.env.COMPILE_ID || '',
 	i18nPath: './i18n/',
 	i18nAttrs: ['title', 'class'],
 	isProduction: process.env.NODE_ENV === 'production'
@@ -43,7 +44,7 @@ const htmlCompile = () => src('./*.html')
 				lang = YAML.parse(fs.readFileSync(config.i18nPath + getLangFileName(file.basename, config.compileLang), 'utf-8'));
 			} catch (_) {}
 			const $ = cheerio.load(file.contents.toString(), { decodeEntities: false });
-			const i18nElements = $(['[i18n]', '[i18n-if]', '[i18n-key]', ...config.i18nAttrs.map(s => `[i18n-${s}]`)].join(',')).map((_, e) => e).get();
+			const i18nElements = $(['[i18n]', '[i18n-if]', '[i18n-id]', '[i18n-key]', ...config.i18nAttrs.map(s => `[i18n-${s}]`)].join(',')).map((_, e) => e).get();
 			for(let i in i18nElements) {
 				const e = i18nElements[i];
 				let val;
@@ -75,6 +76,14 @@ const htmlCompile = () => src('./*.html')
 						$(e).remove();
 					}
 				}
+
+				if (typeof $(e).attr('i18n-id') === 'string') {
+					if ($(e).attr('i18n-id').includes(config.compileId)) {
+						$(e).removeAttr('i18n-id');
+					} else {
+						$(e).remove();
+					}
+				}
 			}
 
 			const gaTrackId = (process.env.GOOGLE_ANALYTICS_ID || '').trim();