beginner guide
Hi again, guys! Hope you enjoyed the topics so far! This week is about part 5 of the guide: HTML introduction.
Part 5: HTML introduction for beginner
You can think of HTML ( HyperText Markup Language) as the bones of a web page for beginner. It defines the structure of the page by specifying the displaying elements and the order that they should be displayed in.
Every web page that you’ve ever visited in your browser has some HTML inside it. When you visit a web page, the web server hosting the web page sends over some HTML to your browser. Then, your browser then reads it and displays it for you.
Most web pages contain a fairly standard set of content, including a title, text content, links to images, navigation links, headers and footers, and more. All of this information is stored as HTML that defines the structure of the page. However, HTML is not a programming language. It is just “HTML code”
Other programming languages enable us to write code that does stuff, does something… such as running a set of instructions in sequence, but HTML doesn’t do anything. We will not run or execute HTML. HTML just sits there in a file and then sending to a web browser which will display it to the end-user.
In fact, HTML is basically just data. In addition, that data defines what a web page should look like, nothing more.
So how will we write HTML? HTML uses a standard set of tags (basically just labels) to identify the available elements that make up a web page.
For example,
the title tag is defined as <title>My Page Title</title> and the paragraph tag is defined as <p>A bunch of random text content.</p>.
Each HTML element contains a starting tag and an ending tag. The starting tag is just the tag label in between angle brackets, like this:
<tagname>
This opens the new HTML tag. The ending tag is essentially the same, but it uses a forward slash after the first angle bracket, to mark it as an ending tag:
</tagname>
Any text between the two tags is the actual content that the page will display.
Let’s cover a couple of the most common tags in use. The first is the <html> tag. This defines the start of an HTML page. A corresponding </html> tag (note the forward slash) defines the end of the HTML page. Any content between these tags will be a part of the page.
The second is the <head> tag. This defines additional information that the browser will use to understand the page. Most of the content in this tag will not display to the user. A corresponding </head> tag defines the end of the HEAD section.
Previously, we saw the <title> tag. It defines the title of the web page, which the browser will display in the browser tab. This tag needs to be placed inside the <head>...</head> section.
Next is the <body> tag.
All content inside this tag makes up the main content of the web page. Putting these four tags together looks something like this:
The simple HTML code snippet above represents a simple web page with a title and a single paragraph as body content for beginner. However, this example brings up a point we didn’t mention in the last section: HTML tags can be placed inside other HTML tags.
HTML provides many other tags to provide a rich set of content to web users. We won’t cover them in detail here, but below is a short list for reference:
<p>: A paragraph of text starting on a new line.<h1>: A page heading usually used for page titles.<h2>: A section heading usually used for section titles.<hx>: Where x is a number from 3 to 6, for smaller headings.<img>: An image.<a>: A link.<form>: A form containing fields or inputs for a user to fill out and submit.<input>: An input field for users to enter information, usually within a form.<div>: A content division, used to group together several other elements for spacing purposes.<span>: Another grouping element, but used to wrap text phrases within another element, usually to apply specific formatting to only a specific part of the text content.
Great! We learned something about HTML, see you next week!