Purpose and basic rules of HTML
What is the purpose of HTML and what is not?
A well-organized website is divided into different components. We differentiate between content, layout, animations and interactivity. Different languages are used for these components.
-
HTML
structures the content. -
CSS
styles the content. -
JavaScript, PHP, ASP.NET etc.
add interactivity and animations.
What is HTML?
HTML is an acronym for HyperText Markup Language.
HTML allows us to display texts, images, tables and hyperinks in a document.
The acronym HTML contains its most important functions:
-
Hypertext
Hypertexts are documents that are interconnected by the so-called hyperlinks. Hypertexts therefore form the foundation of the internet as it would be useless without enough interconnection.
-
Markup
Markup is an important component of a website. The so-called
tagsclassify contents. These tags are also crucial for search engines like Google. -
Language
HTML is not a programming language - Here you can read why it isn't. HTML is a markup language.
Basic rules of HTML
Tags and Elements
With tags we define paragraphs, tables, images, hyperlinks etc. in a document. Tags form the structure of an HTML file.
Tags
Look at the example below:
<p> represents a paragraph.
This code creates a paragraph which contains the sentence Good Morning.
Structure of tags
A tag consists of a definition (for example p) which is located between two angle brackets.
(<tag definition>)
Elements
Usually, tags occur pairwise. These pairs and their content, which is positioned between both tags, you call elements.
The second tag, which is also called end-tag, has an additional slash before the tag-definition. This helps the browser to
differentiate between start-tag and end-tag.
There are also elements which consist of only one tag.
For example, a line break is defined by <br/> and an image is defined by
<img/>. These elements have an additional slash after the tag-definition, that tells the browser that there is no end-tag.
Attributes
It often happens that elements need additional properties for more exact classification. In this case you complete the element by adding some attributes. There even are elements with required attributes.
You always add attributes in the start-tag, after the tag definition. Attributes usually consist of an attribute name and an attribute value (<tag-definition attribute="value">). There are also attributes that don't need a value. (<tag-definition attribute>) It is recommendable to use lower case letters for attributes. The class attribute allows you to add special names to elements which are needed for CSS styling.
Nesting
Tags that occur pairwise can often contain further tags. In our example we emphasize one part of the text in a paragraph.
With <em> we define a text which should be emphasized. Most browsers will display an emphasized text in italics. It is important to understand the difference between just cursive text and highlighted text. The way the text is displayed by the browser can be defined by using CSS. With CSS you could make the browser display emphasized texts in a different way (For example: different color, size and font). HTML only defines, whether a part of a paragraph should be highlighted, or not. It is not responsible for the layout.
Closing of Tags
We always close the tags in the same order as we opened them.
Block- and Inline- Elements
In HTML we differentiate between two types of visible elements:
-
Block-elements
Block-elements automatically add a line break before and after them.
pis a block-element. -
Inline-elements
Inline elements are positioned inside the text flow:
emis an inline-element and adds no line breaks.
With CSS you can also set the display type of an element.
Better readability for HTML-Codes
For better readability of your HTML-Code you should indent your elements with some white spaces.
This could make your files a bit bigger, but it will be easier for you to read and understand your codes later.
Comments
HTML offers the possibility to add comments in the code. Comments allow you to add notes in the code, which visitors of the page can't see. Comments are useful if you want to add information about the code that makes it easier to understand it. You shouldn't add private/important data in comments, because everyone can view the HTML code with a browser. You can also hide parts of your code for the page if you are working on it.
The structure of an HTML comment is easy. Like all other HTML tags a comment starts with an angle bracket. Then an exclamation mark and two dashes(<!--). Then the text. You end the comment with two dashes and an angle bracket (-->). It should be easier for you to understand how an HTML comment works if you see an example:
What is the purpose of HTML and what isn't?
For HTML you always should remember a rule: HTML is only responsible for the structure of contents, not for their layout. <strong> is a good example: Most browsers display <strong> bold, but this is not the real target of this tag. <strong> only has to highlight the text. Later you set its appearance with CSS.
