HTML basics - The syntax of HTML elements | Learn Html Online
HTML COURSE

HTML basics – The syntax of HTML elements

The syntax of HTML elements

HTML basics , the syntax of HTML elements. In HTML, there are five basic concepts that you have to know, and they are:

  • All HTML documents are plain text.
  • All web browsers only do what you tell them to do.
  • You structure elements with tags.
  • Nesting tags must follow a specific pattern.
  • HTML tags can have attributes that add function or meaning to their elements.

HTML editor

Since all HTML documents are just plain text, all you really need to create a webpage is a plain text editor.  Now, it doesn’t have to be anything fancy at all, but it must save your documents in a plain text format.

If you’re on a Mac you can use the built-in TextEdit app just to show this. If you’re on Windows, you can use Notepad.

We need to mark up the document with HTML code to add the structure or scaffolding to tell the browser where to break the text up at and how to format it so that it’s easier for us humans to understand. You add structure by wrapping content in tags.

The syntax of HTML elements: tags

All HTML tags begin with a left angle bracket, or less than sign, then the name of the tag.

We make this HTML by starting out with a less-than symbol, followed by the correct letter, or word, or abbreviated word, and finishing with a greater-than symbol. That makes what’s called a tag, an HTML tag.

Basically, all HTML markup looks like this. The syntax itself is fairly simple. The trickier part is knowing which tags to use when. There are actually two kinds of tags, two flavors, opening tags and closing tags.

The syntax of HTML elements: Opening and closing tags

This <p> is an opening tag. The closing tag is very similar, but it has a slash in it. Less-than symbol, a forward slash, the letter or word that matches the tag that we’re closing, and a greater-than symbol </p>

For example to markup a paragraph properly, we use an opening tag at the beginning of the paragraph, and then a closing tag at the end, like this.

The opening tag marks the beginning, the content goes in the middle, and the closing tag marks the end. These opening and closing tags travel the world together, in pairs. The whole thing is called an element.

Now, not every element has a closing tag. We’ll be looking at some of those later. But a lot of the HTML elements do have both an opening and a closing tag.

Let’s take a look at another example. Here, we have a very short paragraph.

<p>Pellentesque <em>habitant</em> morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

This paragraph has text that’s emphasized for effect. The whole paragraph is wrapped in opening and closing p tags, and then, inside the paragraph, we have another phrase, text that’s emphasized. And we made that into another element by wrapping it in opening and closing em tags.  In fact, and entire HTML document is a whole bunch of HTML elements all nested inside of each other.

The browser pays attention to the structure of how HTML elements are nested, and it creates a big family tree out of who’s related to who, and how. Or, said in the correct technical terminology, it builds a DOM tree from the data structure. The DOM tree comes into play if you write CSS or JavaScript, or when your developers do. The browser then uses the DOM tree to create an accessibility tree. We’ll talk about accessibility, too.

Here is a slightly more practical example of how HTML is nested. We’ve got an article. We can see the opening tag for the article at the beginning, then inside is a headline, followed by three paragraphs. That last paragraph has a phrase of emphasized text inside. And the whole thing is closed at the end with a closing article tag.

<article>
	<h1>This is a headline. </h1>
	<p>This is the first paragraph.</p>
	<p>This is the second paragraph.</p>
	<p>This third paragraph has <em>text that's emphasized</em> for effect.</p>
<article>

It matters where we open and close our HTML tags, and how we nest elements inside of each other. We use this to convey meaning about content and interfaces. Where does that paragraph start? Where does it end? One of the easiest mistakes to make in HTML is to forget to put the closing tag at the end of an element. So don’t forget, include the closing tag.

Save the HTML Page

Save the file on your computer. Select File > Save as in the Notepad menu.

Name the file “index.htm” and set the encoding to UTF-8 (which is the preferred encoding for HTML files). You can use either .htm or .html as file extension. There is no difference, it is up to you.

View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser (double click on the file, or right-click – and choose “Open with”).

The result will look much like this:

  • If you make any changes, open a new document to make sure that those settings took.
  • If you save the page, then go back over to your browser and refresh the page, that’s exactly what your browser does.

Leave a Reply