Skip to main content

Get Started to Learn HTML: Four Basic HTML Elements You Must Know

For the past two days, I had studied HTML from MDN Web Doc,which is provided by Udemy course. 

Before I started, I felt so excited and also nerves. Can I really understand the content? What if the code language is too complex to understand? 

Whatever......Not matter what, I told myself just start to learn. If I am too afraid to even open the web page, I would never figure it out. Try first, and then see what would happen. 

As I read through the first part: Getting Started with HTML, I find it is not to difficult to understand the information. By following the instruction, I can start to write some basic HTML element in the test code box, and see the good result. At that moment, I feel so motivated.

Now, I am going to share my study note and thought with you.

What is HTML?

According to MDN,  HTML is a markup language used to tell your browser how to structure the web pages to visit.

Image you are building a house, HTML is like your house frame and structure. Before you renovate your house or move furniture inside each room, at least you have an empty house built. Your house needs to have door, window, wall, bedroom, living room, bathroom, kitchen, and maybe some stairs to the second floor. Those things are the most basic elements to a house.

What is Basic HTML Element?


An HTML element includes: opening tag, content, and a closing tag.

(Screenshot From MDN: Get Started to learn HTML)

Like the example above, between the opening tag <p> and closing tag </p>, which means "paragraph", you write the content inside it. No matter you write one sentence or five sentences inside the tags, the whole thing is counted one HTML element.

Four Basic HTML Element You Must Know:

  • Nesting Element:
Nesting element is that you put elements inside other elements. 

For example: <p> It is very important to know that.</p>

If you want to bold the word "important", you need to add an <strong></strong> element inside the <p></p>.

So the new element would be :

<p> It is very <strong> important </strong> to know that.</p>

This code result: It is very important to know that. The "important" is bold.

<strong></strong> tags mean that the word is to be strongly emphasized. By the way, <em></em> tags means italic.

If you want to bold and italic the "important". The code would be: 

<p> It is very <strong><em>important</em></strong> to know that.</p>

The result: it is very important to know that.

Mistake needs to avoid:

When I first write nesting element, I forgot to put closing </strong> tag after "important", and that results the rest of the sentence bold. So, always remember to put opening and closing tag when you write the element.
  • Block-level Element:
Block-level elements form a visible block on a page, and they will appear an a new line from whatever content went before it.

Basically, block-level element is that you want to separate the content into different part to make a clear structure on your web page, such as a new paragraph, list of things, navigation menu, etc.

Some most common block-level tags are : <ol> (order list), <ul> (unordered list), <li> (list item), <header> (page header), <p> (paragraph), <aside> (aside content), heading levels <h1> to <h6>.

For example: 


The code uses <p></p> tags which means to separate each word into a new paragraph. The result will be:

You can see that after we insert the block level tag <p></p> between each word, each word will become a new line and start a new paragraph.

  • Inline Element
Inline elements can be within block-level element, and it will not cause a new line to appear in the document. 

From my understanding, the inline element is more like to make some words or sentences special in a paragraph, such as bold, italic, add a link etc. 

However, wherever you put the inline element, it would not separate the word or sentence into a new paragraph. In the other word, the paragraph is not going to change.

The most common inline element tags are :<a></a> (hyperlink), <em></em> (italic), <strong></strong> (bold), <img> (image).

For example: 

I copy one paragraph from a website. In the code part, it includes one block-level tag <p></p>, and two inline tag <strong></strong> and <em></em>.

When I put the inline elements, the output paragraph is still remain one paragraph, but the word "free" and "multi-media features" change the style.


From this example, we can see that inline elements can be nested inside in a block-level elements, but a block-level element can not be nested inside in inline element. The block-level element can be nested inside a block-level element.
  • Empty Element
MDN describes that an empty element is a single tag, which is usually used to insert/embed something in the document at the place it is included. 

If  you want to insert a picture on your webpage, you will use <img> tag.

The code would be <img src="image link or image name from file">

For example, I want to insert one picture on my web page. The first step is to find a image from Google. Then I would copy the image address by right click the picture, and paste the image link in the tag.
from Google image


The code would be <img src="http://images4.fanpop.com/image/photos/19900000/cat-fun-funny-never-looked-so-cute-19942391-460-350.jpg">

At the end, the picture will be showed on your web page.

Therefore, above four elements are the basic HTML elements you must know, and they could be used in every single web page coding. Just practice! 







Labels:

Comments

Post a Comment

Popular posts from this blog

GIT Study Note: Six Git Commands You Should Know!

What is Git? According to Git website , Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Basically, we can use Git to track all of changes and revert them back if we made mistakes. The version control system is a way for us to work with different versions of our code, so that we can save different features and make notes as we progress. It is also very useful for team collaboration. Six Git Command You Should Know 1. Git Init In our server, we need to create a "Git" directory and inside of "Git", we make another direcory "git_inro". Then, we add a file "app,js" in the "git_intro" folder. The first thing we need to run is "git init" . When we run git init, it will make a directory which is hidden called ".git". Wherever I run that git init command, it's going to track all of our changes. ...
Post a Comment
Read more

Intro To Authentication: Three Useful Tools Will Make Everything Easier

Authentication is very important for both users and websites. It helps to keep users' information safe and also helps us to manage the accounts. Authentication is also complex because there is a lot of moving pieces that have to fit together in just the right way to make that work. The course introduce three tools to make authentication more quickly and safely. 1. Passport.js Passport.js will make our life easier and make our code shorter. It also helps to make implementation faster. Most importantly, it is used a lot in the real word. 2. Passport Local Passport Local is for username and password. It's about providing this entry point into all sorts of destinations. 3. Passport Local Mongoose This package will help us implement authentication with passport, and it's specially made to work with mongoose. We are also going to use these three tools into a Secret Page App project, which will show in next few posts.
Post a Comment
Read more

Express Study Notes: Five Steps To Develop My First Express App

In the last post, I shared my study note about one of the most important reason that Node is very popular is because Node has the largest package ecosystem of open source libraries in the world. Node's NPM, the package manager for Javascript, contains almost 200,000 packages which are centralized on the NPM website. And more importantly, NPM has a command line tool which help us to install packages really easily. The course instructor told us that we are going to learn Express.js to develop Apps in this course. screenshot for the Express.js.com homepage What is Express.js? Express.js is a web development framework. According to the course, framework is a bunch of code that someone else wrote just like a library is except when we use a framework, we have less control. The goal of using this framework is to make our development of APPs faster. Why do we use Express.js? 1. It is the most popular Node web development framework so far. 2. It is a very lightweight ...
Post a Comment
Read more