HTML syntax MASTER post!
Abhis
Posted on December 1, 2020
This post is for absolute beginners , you will master html syntax in just 10 minutes.
Stand for:
- HyperText means that it uses the HTTP part of the Internet.
- Markup means the code you write is annotated with keywords.
- Language means it can be read by both a human and a computer.
Like any language, HTML comes with a set of rules. These rules are relatively simple. It comes down to defining boundaries, to know where something starts and where something ends.
Here is a sample paragraph in HTML:
<p>If Tetris has taught me anything it's that errors pile up and accomplishments disappear.</p>
What you see in angle brackets <html> are HTML tags. They define where something.
Each of them carry a specific meaning.
In this case, p stands for paragraph.
They usually go in pairs:
- the opening tag
<p>defines the start of the paragraph - the closing tag
</p>defines its end
The only difference between an opening and closing tag is the slash / that precedes the name of the tag.
When you combine an opening tag, a closing tag, and everything in between, you obtain an HTML element. The whole line is an HTML element that uses the HTML tags <p> and </p>.
If you , you'll notice that HTML tags are not displayed by the browser. They are only read by the browser to know what type of content you've written.
Learn to write html.
You've probably come across simple text files, those that have a .txt extension.
For such a text file to become an HTML document (instead of a text document), you need to use an .html extension.
Open your text editor, and copy paste the following:
<p>This is my firstwebpage!</p>
Save this file as my-first-webpage.html and just open it with your browser, and you'll see:
This is my firstwebpage!
Remember:
- use a text editor like Notepad++ to create HTML documents
- use a browser like Firefox to open HTML documents
Attributes
Attributes act like extra information tied to an HTML element. They are written within an HTML tag. As such, they are not displayed by the browser either.
For example, the href attribute is used to define the target of a link (which uses an anchor tag):
<a href="https://www.mozilla.com/firefox">Download Firefox</a>
There are 16 HTML attributes that can be used on any HTML element. All of them are optional.
You'll mostly use class (which is used for CSS), and title (which is the tooltip that appears when hovering an item like this one).
Some HTML elements have obligatory attributes. For example, when inserting an image, you have to provide the location of the image, using the src (source) attribute:
<img src="#" alt="Description of the image">
Considering that the purpose of the <img> element is to display an image, it makes sense for the path to the image to be required.
How to write comments ?
If you write something in your code without disrupting how the browser will display your page, you can write comments. They will be ignored by the browser, and are only useful for us humans who write the code.
A comment starts with <!-- and ends with -->.
<!-- This sentence will be ignored by the browser -->
<p>Hello World!</p>
Hello World!
Self-enclosing elements
Some HTML elements only have an opening tag:
<br> <!-- line-break -->
<img src="https://placehold.it/50x50" alt="Description"> <!-- image -->
<input type="text"> <!-- text input -->
Because they don't have a closing tag and consequently can't contain anything inside them, self-enclosing elements usually carry a few attributes, to provide them with additional information.
Read more in my next post , till then share it with others.
Posted on December 1, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related