My name is Mason Ellwood, and I’m currently working on Flatiron School’s Online Full Stack Web Development Program. Each week, I’ll be writing about my experience, what I’m learning, and tips on learning to code.
HTML as far as languages go, is probably the most simple language that you will be able to grasp quickly. Again HTML stands for hypertext markup language. And as a markup language, its sole purpose is to semantically label information. This is the structure of your design, how the page flows together at its most rudimentary level. Setting up your HTML document is fairly simple, and many text editors now come with an HTML preset that comes in handy to quickly get you started with the bare essentials.
Every document you set up, if it is a custom HTML document will look roughly like the one listed below.
As you can see at the top of your document is a <!doctype html> declaration. <!doctype> basically tells the browser of the documents HTML version, as well as declares that this is in fact an HTML document
Below this is the <html> tag. You will notice that at the bottom of the page is a closing </html> tag. Do not forget, unless specific rules apply, you will most likely always have to open and close a tag in HTML. This tag is in charge of defining the starting and ending points of an HTML document.
Like before, below this is the <head></head>
The head of your document defines the section of HTML that will include the title, metadata, other browser related scripts, css, and shortcut icon links. This is the meat and potatoes of your document. What functionality you will include, and what files do you want to use to operate on your project. Be careful in the section, if you add or mislabel something here then things can get a little bit wonky.
Next, you guessed it is the <body></body> tags. The body will contain all the visible page content that your project requires. All your images, text, links, and page layout structure. This is what you will most likely spend the most time in. Making sure the foundation of your project is sound before beginning, will allow you to more quickly design and create functionality later.
Tags:
Now that you understand the structure of our document, i’ll cover quickly some of the most commonly used tags in HTML.
- <title>: Defines the page’s main title. This appears in the tab at the top of the browser and is important to search engines.
- <h1>: Tells search engines that the enclosed content is the most important on the page as well as defines a level 1 heading.
- <p>: Contains readable text content and defines a paragraph of text.
- <ul>: Defines an unordered list of items.
- <ol>: Defines an ordered list of items.
- <li>: Creates list items to exist inside either <ol> or <ul> parent elements.
- <img>: Defines an image to be loaded inside the document and defines an imaginary line inside the document used for planning.
- <a>: Defines an anchor link for the purpose of navigating between pages.
This is the basics of HTML. HTML is pretty simple and with the fairly little difficulty, you will be able to grasp it quickly. The Flatiron School does an awesome job at quickly covering how to use it and what it is used for. Without going into to much crazy detail, which I am happy about.
Leave a Reply