Syntax is one of the most important rules of coding because syntax not only defines what you will place on a webpage, but it will also cause massive errors if done incorrectly. I've reviewed HTML and CSS syntax to understand the structure of the coding and to know where to place certain parts while knowing the proper names for each part.
HTML Syntax
Hello World!
The above code shows h1 tag being used to code Hello World into a h1 title.
Below is the breakdown of the html code:
Element:
Element is the entire HTML code put together. It includes the opening and closing tags, and the content. There also may be attributes or ids added to the HTML element as well.
- Example: < h1 > Hello World </ h1 >
Opening Tag:
The element starts with an opening tag, which is the name of the HTML element surrounded by angle brackets (< and >). The opening tag indicates the beginning of the element.
- Example: < p >
Closing Tag:
The element also has a closing tag, similar to the opening tag but with a forward slash (/) before the element name. The closing tag marks the end of the element.
- Example: </ p >
Content:
The content of the element is the information or text that the element contains. It is placed between the opening and closing tags.
- Example: < p >This is a paragraph.< /p >
CSS Syntax
CSS (Cascading Style Sheets) is a stylesheet language used for describing the presentation of a document written in HTML or XML. Here's a breakdown of CSS syntax:
Selector:
The selector is used to target HTML elements that you want to style. It can be an element name, class, ID, or a combination of these.
- Example: p h1 image/img video etc.
Declaration Block:
The declaration block is enclosed in curly braces {} and contains one or more declarations separated by semicolons. Each declaration includes a property and its corresponding value.
- Example: p { }
Property:
The property is the aspect of the selected element that you want to style (e.g., color, font-size, margin, etc.).
- Example: p { font-size: 12px; }
Value:
The value is the specific setting for the property. It follows the property and is separated by a colon.
- Example: p { font-size: 12px; }
Remember that syntax is important because the allows you to render what you need on the screen. But, if the code is not correct, your vision will not render and you will receive a lot of errors.
Top comments (0)