In order to understand how to put text into a paragraph, and your paragraphs into a specific <div> block. Give it a header and set the title for the page. We must first understand what you’re using. Html is not a complex programming language, and browsers allow for a lot of errors, so it’s worth to just give it a go and learn by practice.
Elements, tags & attributes
For text to show up in a paragraph, or the header (title) to show up in a bigger font and in bold, you must understand that you have to program your content to tell the browser ‘open a header tag, this is the title, and now close it’. For example: <h1>the title</h1>
These ‘tags’ are the elements of the objects on the page, and the content on the page. Some I have already mentioned, such as h1 for a big header title, p for paragraph and div for a div block.
Elements wrapping around content have to be closed as well. Such as in the above example, where I opened the header, set the title, and closed the header element.
These are commonly referred to as the opening and closing tags.
There are also single tags. Such as a break (to new line) and horizontal line.
Depending on your coding standards, you can choose to not close my single tags with a /
I mean: This is correct: <img /> but I try to use <img>.
Quick test: </div> Is this an opening tag, or a closing tag?
Answer: The forward slash right after < and in front of the div tells you it’s a closing tag.
Example: <div>Opened on the left. And now closed on the right</div>
Quick test: <hr> Is this an opening tag, or a closing tag?
Answer: A horizontal rule is a single tag, it doesn’t wrap around content (void element).
Example: <div>Bunch of content</div> <hr> <div> More content, below the line.</div>
The above should get you started with your first html5 page, but you can define additional properties to an element, such as a unique id, a class or a style exception. These are called attributes.
Example: <div class="warning">Notice! You're on thin ice.</div>
The above element is div. It has an opening and a closing tag. And they’re wrapped around the content. The div tag has the attribute class (set to warning).
Attributes are commonly used to define exceptions to the design (such as a warning box at the top of a page). Or to define a source for the <img> tag: <img src="image.png"> Or to define the hyperlink reference for the <a> tag: <a href="winter.html">click me!</a>.
One more thing, before we dive into your first HTML5 page.
The basic structure of an HTML5 page is wrapped within the html element, after a doctype is defined, and is split up in two sections. a) The <head> which is hidden, I mean, not visibly rendered. And b) the <body> which is public, I mean, it is visibly rendered.
You can put meta data in the head section, link to your css and js files, set the title of the document, and stuff like that.
You can put the html code you want to render visually in the body section. Such as your header and footer, the navigation, sidebar, and the content (article) of the page.
My First HTML5 Page
You can do this without owning a domain name, without having a hosting account. And with almost any text editor. Notepad++ (Win) or BBedit / TextMate (Mac) or whatever lets you write .html or plain text files. Once the first.html file has been created, you can right click it and select to open it with your browser of choice. The html5 code will be rendered to something visual.
Open the text editor, and let’s define the doctype, so we tell the browser we’re going to be using html version 5. Then, we will wrap our whole page inside the html element and split it up with the head and body tags. Within these two sections we will add our meta data and our content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My First HTML5 Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>Isn't this freaking awesome?</p>
</body>
</html>
The meta element is used with the attribute charset, to set the document encoding to utf-8. The header (1 for biggest) elements has open and close tags, with the title inside it. And finally we made a paragraph with the text of how awesome this is. The p element has opening and closing tags.
Pretty simple huh?
Save the file as first.html and just open it in the browser.
(or just load this link)
Your next step is to read up on the various elements, play around with examples and get familiar with the tags. Write some content, wrap it up in opening and closing tags, load it in the browser and see how it looks.
Almost every page on the Internet is using HTML, from version 3.2 to version 5. Understanding the structure, what the tags mean and how it’s the structure to a web page, will help you better understand how to make your own web pages, but it will also help you to better understand what you see when you’re visiting a web page made by others.
Have fun!