Introduction to HTML
HTML is the foundation of website development. It stands for HyperText Markup Language and is used to structure content on a web page. In this HTML tutorial, we’ll give you an overview of the HTML code structure and how HTML works.
What is HTML?
HTML is a code that helps web browsers interpret and display web pages. It is made up of a series of elements, which you can think of as the building blocks of a web page. These elements are represented by tags, which you’ll learn more about later in this tutorial.
How does HTML work?
HTML code is made up of a series of elements, which are represented by tags. The tags are enclosed in angle brackets < >, and each element has an opening tag and a closing tag. The closing tag has an extra forward slash / before the element name. For example, the opening tag for a paragraph element is
, and the closing tag would be
.
The content that you want to display on a web page goes between the opening and closing tags for each element. For example, if you wanted to create a paragraph element with the text “Hello, world!” inside it, your HTML code would look like this:
Hello, world!
Once you’ve written your HTML code, you need to save it with a .html or .htm file extension so that your web browser can interpret it as an HTML document.
You can then open your HTML file in any web browser – we recommend Google Chrome – and your web page will be displayed!
Basic HTML Structure
Every HTML document starts with a DOCTYPE declaration, which tells the web browser what type of document to expect. For most pages on the internet today, this will be one of two possible values: or . The html5 doctype is newer and preferable for most cases today.
After the DOCTYPE declaration, you’ll find the tag – this is the root element of your HTML document. All other elements on your page will be contained within this tag. Within the element, there are two more important tags: the
element and the element.The head Element
The head element contains information about your website that isn’t necessary for displaying content on the page – things like the website title, author name, etc. This information is used by browsers and search engines to understand more about your website. Most importantly, the head contains link tags () which are used to load external resources like CSS files (which we’ll talk about later).
The body Element
The body element contains all of the content that you want to display on your website – text, images, videos, etc. Every piece of content on your page should be contained within body tags (
Creating Your First Web Page!
Now that you know all about HTML structure, let’s put what you’ve learned into practice by creating your first web page! We’re going to keep things simple for now and just create a basic “About Me” page using some text and an image. But first things first – open up your favorite text editor (we use Sublime Text) and create a new file called “aboutmepage.html”. Once you have that file open in your text editor, copy and paste the following code into it:
