Welcomes to GettingStarted
HTML and CSS are markup languages. You can use them to define the content and appearance of items on a page rendered in a browser or other tool.
There are two primary types of markup:
We want to separate content and presentation. We use HTML tags to define the structure of the content that we want to share with the user. This includes text, video, and images. We use CSS to define the way the page should appear. This includes thing like the pages color, the text color, the text font and size, whether the text is italic or bold, etc. All this should be defined in a CSS file, and kept separate from the content defined in the HTML file.
There are no rules that force you to separate content and style. In fact, it is possible to mix them up, but the result is rarely pleasing or useful.
The separation of content and presentation may be a purely voluntary decision, but it is considered a best practice. That perhaps does not state the matter firmly enough: it is considered a hallmark of well written code that content is found in HTML files and presentation in CSS files. To abandon this stratagem is usually a serious mistake.
When building pages, it is most important to think about design. This is especially true of the mobile web.
The word semantic used in this context can be confusing. The problem stems from the fact that semantics, when applied to text, has a common and well established set of associations that has nothing to do with web pages. When we see text, and we hear the word semantics, we think about the meaning of the text. In this context, however, that is not the correct interpretation.
Semantics is the study of meaning. If you have a paragraph of text, and you are trying to describe or define what it means, then you are discussing the semantics of the paragraph. That is the way you have probably used the word in the past.
Semantic markup is a different matter altogehter. It refers to the way we can use HTML tags to give the elements in an HTML page meaning. In this case, we are not talking about analyzing a paragraph to decide what the words in it mean. Instead, we are assigning very broad, meta-level meaning to the elements on a page.
Consider the following text:
This is a paragraph.
Now consider the following bit of HTML:
\ This is a paragraph.\
This is a paragraph.\
In the second example we are marking up text by using the HTML \
tag. This tag gives semantic meaning to a the text. In particular, \
tags are used to assert that a chunk of text in an HTML document is a paragraph. By surrounding a bit of text with a \
tag, we are giving it meaning, we are saying that it is a paragraph. We aren't analyzing the text itself to discover what the text means, we are simply making a very broad statement about the text: it is a paragraph.
You might, of course, object that you didn’t need to be explicitly told that a paragraph is a paragraph: you could figure that out for yourself. But a computer does not reason as you do. It is difficult, if not impossible, to give a computer a page of text from a book and teach it to distinguish between paragraphs, headers, lists, footnotes, side panels, and so on. By using HTML tags, however, we can easily assign semantic meaning to the elements of a page, and hence teach a computer to distinguish between these elements. The markup does not help the computer or the reader better understand the content, but only declare whether a bit of text is a paragraph, a header, a footer, etc. This is what we mean by semantic markup.
The words semantic HTML might sound complex. The idea behind them, however, is very simple. It may be hard to discover the meaning of a paragraph in the works of Emanuel Kant. It should not, however, ever be difficult to discern that a bit of text in an HTML document is a paragraph. In general, if it is difficult to parse and understand the basic "HTML semantics" of an HTML page, then something is wrong. In particular, it usually means that the developer has done a sloppy job of constructing the page. HTML semantics is a simple subject, and an HTML page should usually have mark up that is easy to understand.
As you have seen, we can use HTML to give meaning, to describe, the content found in our pages. We don't use HTML markup to describe how a page should look: that is the job of CSS. Instead, we use markup to give meaning to the elements in a page. In particular, we are using HTML markup to say that some piece of content is a paragraph, a header, a footer, etc.
Here are a few commonly used HTML tags:
: This is a paragraph tag
These various tags tell us nothing definitive about the way text should be rendered. Instead, they tell us something about the meaning of the content found within the tag. For instance, the text found inside a \
tag defines a paragraph. The text found in an \
When put this way, the whole matter may seem trite, or obvious. However, in the history of HTML, web developers tended to think of \
tags as a way to make text appear in a default font. The \
tag. The \
tells an HTML parser that this bit of text is part of a paragraph. It says nothing about what the words in the paragraph mean.
Semantic HTML is helpful because it helps us write clean, easy to understand markup. But its value goes beyond that. It can also help an HTML parser extract information from a document. For instance, if an H1 tag is used only to specify major headings in a document, then a parser can scan through a document, pull out the H1 elements, and come away with a summary of the major points in the document. This concept helps to form the roots of the Semantic Web, which is a way of making pages intelligent enough so that they content can be parsed and linked by automated tools. But we are now getting ahead of ourselves.
The first step is to gather together or imagine various forms of content such as words, sentences, images, videos, sound clips, etc. Next one creates and HTML page and places this content, or references to this content, inside a set of tags. Collectively, these tags are known as markup.
Consider the following sentence:
Here is some content.
That sentence represents some content that you want to display to a user. Here is how to "mark it up" by surrounding it with tags:
<p>Here is some content</p>
The mark up here is a P tag, or paragraph tag. There are two bits of markup, an opening tag and a closing tag. The opening tag consists of two angle brackets, the closing tag of two angle brackets and a slash:
What do these tags do? Why do they exist? To best understand their role, it helps to perceive them within a certain context. For instance, suppose our content were to be displayed inside a web browser. In that case, the browser would scan our content, find the tags, and render the content based on the tags that it sees. In particular, it would see our simple \
tags and render the content between them as it feels a normal paragraph should be rendered. This usually means that there should be some white space before the paragraph, and a bit of white space after it. In that context, the role of the \
tag is to mark the content inside it as a paragraph.
In general, the markup language called HTML is designed for one specific purpose: to provide semantic context for the content in a document. In that sense, it provides browsers with a hint about how to render content. The \
tag stands for paragraph, and its purpose is to tell a browser that it should render the content found within it as a paragraph. It doesn't say if the font used should be cursive, serif or sans serif. It doesn't say what color it should be. Furthermore, it is possible for all kinds of different tools, including the human eye, to parse an HTML document, find things like \
tags, and do any number of arbitrary things with them, either explicitly when they are rendered, or implicitly when we assign meaning of our own to them..
HTML is a meta language for marking up a document so that different elements within it are given meaning or assigned to certain abstract categories. What any one tool might do with that content is up to the individual tool. For instance, we could build a tool that scans through a document, finds all the content in the \
tags, and counts the number of words in that content. This tool would then tell the user how many words are in the paragraphs of that document. This is not a task that a browser normally performs, but HTML makes it possible for us to perform such tasks. In practice, however, the primary thing HTML does is provide semantic meaning to content, so that a web browser can render it for a user based on some engineers or managers perception of what that type of content should look like.
So far we have focused on one single HTML tag. An HTML document typically consists of a series of different tags arranged in different sections. There is a great deal of variety in terms of what specific tags appear in what specific order in an HTML document. Nevertheless, there are discreet sections in an HTML document. The actual content of these individual sections usually varies, but the sections themselves are always present, and they usually appear in a clearly defined order
For instance, here is a very simple HTML document:
<html> <body> <p>Hello world</p> </body> </html>
Start in the middle, with the content that reads Hello World. Note that it appears inside an opening and closing \
tag. Taken together, this line of code, is called an element. The element includes the \
tags and the content inside it. So that one line has three different parts:
Tags, content, element. This is the bread and butter of HTML.
Notice that the paragraph element we have been discussing is folded inside a \tag. All of the content that is going to be displayed inside an HTML document should be defined within the \ tag. It's purpose is to tell the browser: "Okay, I'm about to start telling you about the content that I want you to display.
Any one document might have many lines of content. For instance, here is a document that contains a sonnet:
<html> <body> <h1>Shakespeare Sonnet 1</h1> <p>From fairest creatures we desire increase,</p> <p>That thereby beauty's rose might never die,</p> <p>But as the riper should by time decease,</p> <p>His tender heir might bear his memory:</p> <p>But thou contracted to thine own bright eyes,</p> <p>Feed'st thy light's flame with self-substantial fuel,</p> <p>Making a famine where abundance lies,</p> <p>Thy self thy foe, to thy sweet self too cruel:</p> <p>Thou that art now the world's fresh ornament,</p> <p>And only herald to the gaudy spring,</p> <p>Within thine own bud buriest thy content,</p> <p>And tender churl mak'st waste in niggarding:</p> <p>Pity the world, or else this glutton be,</p> <p>To eat the world's due, by the grave and thee.</p> </body> </html>
This document has many \
tags in it, but still all of the content surrounded by those tags is wrapped inside a single \<body> tag. This pattern never varies inside well formed HTML documents: the content found in the document is always wrapped in a body tag.
You might notice that this document contains not only \ tags, but also a single \ tag. This is called a heading tag, and it tells the browser to render the words Shakespeare Sonnet 1 as a header. It says nothing about what a header should look like. Usually, headers are rendered in large bold print on a single line. The HTML shown here, however, does not state that explicitly.
There are various levels of headings such as \<h1>, \<h2>,
\<h3> etc. As a rule, \<h1> tags are larger than \<h2>
tags, and so on. There is nothing in this document, however, that
insists that this must be so. This hierarchical structure is a
peculiarity of heading tags. There is no such thing as tags called
You have had a look at \ tags, \ tags, and \ tags. But what is the purpose of the \ tag?
It turns out that most documents have a certain amount of meta information associated with them. This meta information usually appears between the opening \<html> tag and the opening \<body> tag:
<html> <head> <title>Basho Haiku</title> </head> <body> <p>Clouds now and again</p> <p>Give a soul some respite</p> <p>From moon-gazing: behold!</p> </body> </html>
This document contains a head element, and inside it is a title element. The title element is not considered part of the document's content and the browser does not render it in the HTML page. However, most browsers will display in the title in the tab found at the top of a browser. A title differs from a header in that it is not part of the main body of the content. There will only be one title in an HTML document, while there might be many \ tags.
It turns out that you can put a great deal of information inside a \<head> tag. However, for now, I'm only going to show you the title element. After you have had a chance to think about the broad outlines of an HTML document, as show above in the Basho document, then you can start learning about the many subtle pieces of a complex HTML document.
Finally, you should add a DOCTYPE to the top your document. This tells the browser which implementation of HTML your code supports. For instance, if your code is designed for HTML5 or above, then you would write this:
Here is a complete HTML 5 document that includes the doctype:
<html> <head> <meta charset="utf-8"> <title>Untitled 1</title> </head> <body> </body> </html>
Though I am no longer using it, many people still like to create XHTML documents which can be set up like this:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Untitled 1</title> </head> <body> </body> </html>
There is nothing really wrong XHTML per se, and I believe that all our HTML documents should be written in such a way as to include only valid XML, nevertheless, many people object to the length and complexity of the DOCType tag shown here. It simply leaves me with a bad taste reminiscent off all the horrible \