DEV Community

Cover image for HTML syntax MASTER post!
Abhis
Abhis

Posted on

HTML syntax MASTER post!

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Download Firefox

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">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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 -->
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)