--- layout: ~/layouts/Main.astro title: Astro Components --- **Astro Components** (files ending with `.astro`) are the foundation of server-side templating in Astro. Think of the Astro component syntax as HTML enhanced with JavaScript. Learning a new syntax can feel intimidating, so we carefully designed the Astro component syntax to feel as familiar to web developers as possible. It borrows heavily from patterns you likely already know: components, frontmatter, props, and JSX expressions. We're confident that this guide will have you writing Astro components in no time, especially if you are already familiar with HTML & JavaScript. ## Syntax Overview A single `.astro` file represents a single Astro component in your project. This pattern is known as a **Single-File Component (SFC)**. Both Svelte (`.svelte`) and Vue (`.vue`) also follow this pattern. Below is a walk-through of the different pieces and features of the Astro component syntax. You can read it start-to-finish, or jump between sections. ### HTML Template Astro component syntax is a superset of HTML. **If you know HTML, you already know enough to write your first Astro component.** For example, this three-line file is a valid Astro component: ```html

Hello world!

``` An Astro component represents some snippet of HTML in your project. This can be a reusable component, or an entire page of HTML including ``, `` and `` elements. See our guide on [Astro Pages](/guides/astro-pages) to learn how to build your first full HTML page with Astro. **Every Astro component must include an HTML template.** While you can enhance your component in several ways (see below) at the end of the day its the HTML template that dictates what your rendered Astro component will look like. ### CSS Styles CSS rules inside of a ` ... ``` Sass (an alternative to CSS) is also available via `