Your first HTML page

Your first HTML page

What is HTML?

HTML comes from Hypertext Markup Language and is the standard markup language for creating web pages and web applications. With CSS ( Cascading Style Sheets ) and JavaScript, it forms the complete stack of technologies for the World Wide Web. HTML files comes in format .html or .htm and contains different tags. With CSS you can style the look of the web page and with Javascript you can interact with the page making animations, using events, showing alerts and so on. To open an HTML page you can just double-click on it, but if you want your HTML page to be generated and to have dynamic data you need to have some backend code on a web server to do that. I will show you that in a future post.

Basic HTML page

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <p>Content</p>
</body>
</html>

Most of HTML tags have to be closed like <title></title>, but some of them are self-closing tags like <img src="myimage.jpg" />. <head> is the place where all properties are read by the browser and use to render your web page. Here you can place CSS files, title, and meta tags. Inside <body> is the actual content rendered in the browser.

Common elements

Most common elements used in html are the following:

  • Titles: <h1>Some title</h1> Header titles can be from h1 to h6 ( big font to small )
  • Image: <img src="myimage.jpg" /> src is the source of image ( absolute / relative path )
  • Inputs: <input type="text" name="mytext" /> type can be different depending on usage ( submit, password, email, hidden etc ) and name is the key to read the value
  • Forms: <form> <!-- fill with inputs --> </form> to send the data to server all inputs have to be inside a form that has action and method filled ( we’ll practice this later )
  • Links: <a href="nextpage.html" /> href is the target page
  • Divs: <div> <!-- fill with anything --> </div> more of a generic tag, a div is kind of a container to separate purposes of tags and style easier the page
  • Line break: <br />

Content sectioning

To create more easily readable code you can add some tags specific to certain areas of the page.

  • Navigation bar: <nav></nav>
  • Header: <header></header>
  • Footer: <footer></footer>
  • Section: <section></section>

Try to create an .html file in your favourite editor ( you can choose one here ) and exercise a few tags inside the body. See you in the next article!

Share on

See Also
Send us a few words.
What would you like to see different on this blog?
👌
👎